It smells like AJAX but I'm not sure - php

Question

AMENDMENT:
Hi all, thanks for all your replies. I've been wrestling trying to shoe horn the code into my page but I've still had no luck. While fiddling around I can't see why something like the below code wouldn't work - I can't get this to work either mind you(!). If it's not possible I'm hoping someone can shoot the idea down to save me wasting time trying to do it:
<form name='Names' role='form' action='#' method='get' onchange='this.form.submit()'>
<select name="FirstName">
<option value="1">FirstName#1</option>
</select>
<select name="LastName">
<option value="1">LastName#1</option>
</select>
</form>
...could I then pick up these selections in $_GET['FirstName'] and $_GET['LastName'] and pass them into my mysqli_query() to generate the table?
To prevent any chance of my confusion spreading I first want to describe what I'm trying to do... I want a webpage that has a table with a group of dropdowns that I can filter on - similar to Excel filters. If you know of a better way of doing it than how I'm trying below - please do enlighten me!!
Now, to describe the best progress I've made so far:
I have the below script (copied straight over from W3schools:
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","entry_table.php?q="+str,true);
xmlhttp.send();
}
</script>
The above script is called from the below dropdown which populated using a PHP while loop from an SQL query:
<form>
<select name="Name" onchange="showUser(this.value)">
<option value="1">User#1</option>
</select>
</form>
The $q value is then passed to a PHP page to display the table after generating the SQL query with a:
WHERE UserID="$q"
This works but I'm concerned it seems to be a long-winded way of doing it - especially if I'm try to and expand the queries to include 6-7 other dropdown filters.
Thanks in advance,
Ben

Answer 1

You could go for a callback function instead.
function getData(url, callback)
{
if (window.XMLHttpRequest)
{
//IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{ //IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
callback(xmlhttp.responseText);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
And then make an ajax call like this:
getData("entry_table.php?q="+str, function(data)
{
document.getElementById("txtHint").innerHTML=data;
});
Outer function
function doStuff(value) {
getData("entry_table.php?q="+value, function(data)
{
document.getElementById("txtHint").innerHTML=data;
});
}
and then select would be
<select onchange="doStuff(this.value)">