I am trying to create a form that show a table obtain from a databse. I am following the tutorial about AJAX from the w3school and let me give my example:
I have a php file that print a table as a result of a database request with two variable x and y. If I put in my favorite navigator: localhost/list.php?x=0&y=0 it print a nice table... But what I want is to obtain x and y by a form I write more or less as in the turorial a index.html file:
<!DOCTYPE html>
<html>
<head>
<script>
function loadList() {
var xhttp;
var x = document.getElementById("x").value;
var y = document.getElementById("y").value;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("table").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "list.php?x="+x+"&y="+y, true);
xhttp.send();
}
</script>
</head>
<body>
<form action="">
<input type="text" id="x"> <br>
<input type="text" id="y"> <br>
<input type="button" value="Find" onclick="loadList()">
</form>
<div id="table"> </div>
</body>
</html>
I would like that my form write the result (forexample when x=0 and y=0) of the list.php file in the div="table" at the end after the form! But... It does not works and I cannot resolve my problem.
Thanks in advance for your help!!