The first page contains a simple form and uses the JavaScript "onchange" event for each drop down menu to trigger the function "showResults" from the ajax.js page. The results from the database are updated in the <div> tag at the end of the page.
ยป See the demo
In your default.asp page, place the following in the <head> section:
<script src="ajax.js" type="text/javascript"></script>
This is a simpe form with three drop down boxes. Each box has an onchange event which passes the values for each box to the showResults function on the ajax.js page. Place the following in the <body> of the default.asp page:
<form name="myform" id="myform">
<table width="250" border="0">
<tr><td><strong>age:</strong></td></tr>
<tr><td>
<select name="age" onchange="showResults(this.value, document.myform.status.value, document.myform.gender.value)">
<option value="20">20</option>
<option value="30">30</option>
<option value="40">40</option>
</select></td></tr>
<tr><td><strong>status:</strong></td></tr>
<tr><td>
<select name="status" onchange="showResults(document.myform.age.value, this.value, document.myform.gender.value)">
<option value="unemployed">unemployed</option>
<option value="employed">employed</option>
<option value="student">student</option>
</select>
</td></tr>
<tr><td><strong>gender:</strong></td></tr>
<tr><td>
<select name="gender" onchange="showResults(document.myform.age.value, document.myform.status.value, this.value)">
<option value="male">male</option>
<option value="female">female</option>
<option value="any">any</option>
</select>
</td></tr>
</table>
</form>
<div id="txtResults"><p style="font-style:italic">Results will be listed here.</p></div>
