<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="en"lang="en"><head><metahttp-equiv="content-type"content="text/html; charset=utf-8"/><title>Employees by Department</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"type="text/javascript"></script><scriptsrc="ajax.js"type="text/javascript"></script><scriptsrc="dept.js"type="text/javascript"></script><styletype="text/css"media="all">@import"style.css";</style></head><body><!-- dept_form_ajax.html --><p>Select a department and click 'GO' to see the employees in that department.</p><formaction=""method="get"id="dept_form"><selectid="results"></select><p><selectid="did"name="did"><optionvalue="1">Human Resources</option><optionvalue="2">Accounting</option><optionvalue="3">Marketing</option><optionvalue="4">Redundancy Department</option></select></p></form></body></html>

// dept.js/* This page does all the magic for applying
* Ajax to an employees listing form.
* The department_id is sent to a PHP
* script which will return data in HTML format.
*/// Have a function run after the page loads:
window.onload = init;// Function that adds the Ajax layer:function init(){// Get an XMLHttpRequest object:var ajax = getXMLHttpRequestObject();// Attach the function call to the form submission, if supported:if(ajax){// Check for DOM support:if(document.getElementById('results')){// Add an onsubmit event handler to the form:
$('#did').change(function(){// Call the PHP script.// Use the GET method.// Pass the department_id in the URL.// Get the department_id:var did = document.getElementById('did').value;// Open the connection:
ajax.open('get','dept_results_ajax.php?did='+ encodeURIComponent(did));// Function that handles the response:
ajax.onreadystatechange =function(){// Pass it this request object:
handleResponse(ajax);}// Send the request:
ajax.send(null);returnfalse;// So form isn't submitted.}// End of anonymous function.)}// End of DOM check.}// End of ajax IF.}// End of init() function.// Function that handles the response from the PHP script:function handleResponse(ajax){// Check that the transaction is complete:if(ajax.readyState ==4){// Check for a valid HTTP status code:if((ajax.status ==200)||(ajax.status ==304)){// Put the received response in the DOM:var results = document.getElementById('results');
results.innerHTML = ajax.responseText;// Make the results box visible:
results.style.display ='block';}else{// Bad status code, submit the form.
document.getElementById('dept_form').submit();}}// End of readyState IF.}// End of handleResponse() function.

dept_results_ajax.php

<?php # dept_results_ajax.php// No need to make a full HTML document!// Validate the received department ID:
$did =0;// Initialized value.if(isset($_GET['did'])){// Received by the page.
$did =(int) $_GET['did'];// Type-cast to int.}// Make sure the department ID is a positive integer:if($did >0){// Get the employees from the database...// Include the database connection script:
require_once('mysql.inc.php');// Query the database:
$q ="SELECT * FROM employees WHERE department_id=$did ORDER BY last_name, first_name";
$r = mysql_query($q, $dbc);// Check that some results were returned:if(mysql_num_rows($r)>0){// Retrieve the results:while($row = mysql_fetch_array($r, MYSQL_ASSOC)){?>
<option value="<?php echo $row['last_name'];?>"><?php echo $row['last_name'];?></option><?php
}// End of WHILE loop.}else{// No employees.
echo '<p class="error">There are no employees listed for the given department.</p>';}// Close the database connection.
mysql_close($dbc);}else{// Invalid department ID!
echo '<p class="error">Please select a valid department from the drop-down menu in order to view its employees.</p>';}?>