I have the following HTML.
Currently it relies on the user hitting the 'Go' button to Submit the Form.
Is it possible to change this so it submits each time the user selects a dropdown option?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
".dtd">
<html xmlns="" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Employees by Department</title>
<script src="ajax.js" type="text/javascript"></script>
<script src="dept.js" type="text/javascript"></script>
<style type="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>
<form action="dept_results.php" method="get" id="dept_form">
<p>
<select id="did" name="did">
<option value="1">Human Resources</option>
<option value="2">Accounting</option>
<option value="3">Marketing</option>
<option value="4">Redundancy Department</option>
</select>
<input name="go" type="submit" value="GO" />
</p>
</form>
<select id="results"></select>
</body>
</html>
For the record, here is my dept.js file contents:
// 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:
document.getElementById('dept_form').onsubmit = 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);
return false; // 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 plete:
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.
Many thanks for any pointers here.
I have the following HTML.
Currently it relies on the user hitting the 'Go' button to Submit the Form.
Is it possible to change this so it submits each time the user selects a dropdown option?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Employees by Department</title>
<script src="ajax.js" type="text/javascript"></script>
<script src="dept.js" type="text/javascript"></script>
<style type="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>
<form action="dept_results.php" method="get" id="dept_form">
<p>
<select id="did" name="did">
<option value="1">Human Resources</option>
<option value="2">Accounting</option>
<option value="3">Marketing</option>
<option value="4">Redundancy Department</option>
</select>
<input name="go" type="submit" value="GO" />
</p>
</form>
<select id="results"></select>
</body>
</html>
For the record, here is my dept.js file contents:
// 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:
document.getElementById('dept_form').onsubmit = 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);
return false; // 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 plete:
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.
Many thanks for any pointers here.
Share Improve this question asked Feb 15, 2012 at 6:35 michaelmcgurkmichaelmcgurk 6,53125 gold badges101 silver badges197 bronze badges2 Answers
Reset to default 3This might give you an idea.
replace:
document.getElementById('dept_form').onsubmit = function() {
with this:
$('#did').change(function () {
or rather with this:
document.getElementById('did').onchange = function() {
You can try to use in select:
<select id="did" name="did" onchange="this.form.submit();">