baran
Long ago, while i was fiddling with PHP, I had 2 simple scripts, one takes input and the other processes that input.
<!DOCTYPE html>
<body>
<script type="text/javascript">
// create a function that will receive data
// sent from the server and will update
// div section in the same page
function process()
{
var ajaxRequest = new XMLHttpRequest();
//alert("a");
ajaxRequest.onreadystatechange = function()
{
alert("b");
if(ajaxRequest.readyState == 4)
{
//alert("c");
var ajaxDisplay = document.getElementById('ajaxDiv');
//alert(ajaxDisplay);
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var age = document.getElementById('age').value;
//alert("Age:" + age);
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
var queryString = "?age=" + age;
queryString += "&wpm=" + wpm + "&sex=" + sex;
ajaxRequest.open("GET", "server.php" + queryString, true);
ajaxRequest.send(null);
}
</script>
<form name="myForm">
Max Age: <input type="text" id="age" /><br /> Max WPM: <input
type="text" id="wpm" /><br /> Sex: <select id="sex">
<option value="m">m</option>
<option value="f">f</option>
</select> <input type="button" onclick='process()'
value='Query MySQL' />
</form>
<div id="ajaxDiv">Result is displayed here.</div>
</body>
</html>
and my server.php is as follows:
<!DOCTYPE html>
<body>
<script type="text/javascript">
// create a function that will receive data
// sent from the server and will update
// div section in the same page
function process()
{
var ajaxRequest = new XMLHttpRequest();
//alert("a");
ajaxRequest.onreadystatechange = function()
{
alert("b");
if(ajaxRequest.readyState == 4)
{
//alert("c");
var ajaxDisplay = document.getElementById('ajaxDiv');
//alert(ajaxDisplay);
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
var age = document.getElementById('age').value;
//alert("Age:" + age);
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
var queryString = "?age=" + age;
queryString += "&wpm=" + wpm + "&sex=" + sex;
ajaxRequest.open("GET", "server.php" + queryString, true);
ajaxRequest.send(null);
}
</script>
<form name="myForm">
Max Age: <input type="text" id="age" /><br /> Max WPM: <input
type="text" id="wpm" /><br /> Sex: <select id="sex">
<option value="m">m</option>
<option value="f">f</option>
</select> <input type="button" onclick='process()'
value='Query MySQL' />
</form>
<div id="ajaxDiv">Result is displayed here.</div>
</body>
</html>
