Two drop down lists in Ajax and MySQL - php

Question

I'm trying to learn some Ajax and MySQL...
Basically, the code that I have right now is similar to: http://www.w3schools.com/PHP/php_ajax_database.asp
I was wondering how should I modify those codes (both html, javascript and php) to create two drop down lists. The first drop list would be used for choosing the Lastname (eg. Swanson) and the second drop list would be used for choosing the Hometown (eg. Quahog). Then the user would click "Submit" button and the query would return the matching results (eg. all the Swansons living in Quahog).
I'd be very thankful for all the ideas!

Answer 1

The only major difference to the html page will be the addition of another dropdown, addition of the submit button, and removal of the onchange event (assuming you want this removed since you're relying on the submit button). So instead of:
<form>
Select a User:
<select name="users" onchange="showUser(this.value)">
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Glenn Quagmire</option>
<option value="4">Joseph Swanson</option>
</select>
</form>
You now have:
<form>
Select a User:
<select name="lastname" id="lastname">
<option value="Griffin">Griffin</option>
<option value="Quagmire">Quagmire</option>
<option value="Swanson">Swanson</option>
</select>
<br>
Select a Hometown:
<select name="hometown" id="hometown">
<option value="Quahog">Quahog</option>
<option value="Newport">Newport</option>
</select>
<input type="submit" value="Submit" onclick="showUser(Document.getElementById('lastname').value, Document.getElementById('hometown'))">
</form>
The only change you need to the javascript is to change the showUser function to take and process the two inputs. So the declaration becomes:
function showUser(lastname, hometown)
and instead of the line:
url=url+"?q="+str;
you need:
url=url+"?lname="+lastname+"&town="+hometown;
Then in the PHP, you need only change the variable assignments and the query that is being executed. So:
$q=$_GET["q"];
Becomes:
$lname=$_GET["lname"]; $town=$_GET["town"];
And:
$sql="SELECT * FROM user WHERE id = '".$q."'";
Becomes:
$sql="SELECT * FROM user WHERE lastname = '".$lname."' AND hometown = '".$town."'";