Here is a good example of how it works. Call the first file test.html. Call the second file test.php. Save both files in the same directory. Run test.html.
////////////////test.html//////////////////////
<html>
<head>
<script language="javascript">
function getXmlHttpRequestObject() {
if (window.XMLHttpRequest) {
return new XMLHttpRequest();
} else if(window.ActiveXObject) {
return new ActiveXObject("Microsoft.XMLHTTP");
} else {
alert("Please upgrade your browser to gain full functionality.");
}
}
//Our XmlHttpRequest object
var AJAXObject = getXmlHttpRequestObject();
var AJAXObject1 = getXmlHttpRequestObject();
function ajaxcall(url,functionname){
if (AJAXObject.readyState == 4 || AJAXObject.readyState == 0) {
AJAXObject.open("GET", url, true);
AJAXObject.onreadystatechange = functionname;
AJAXObject.send(null);
}
}
function ChangeSelect(a){
var url = "./test.php?state=" + a;
ajaxcall(url,checkChangeSelect);
}
function checkChangeSelect(){
if(AJAXObject.readyState == 4){
document.getElementById("mycityselect").innerHTML = AJAXObject.responseText;
}
}
</script>
<select id="states" onChange="ChangeSelect(this.value);">
<option value=''></option>
<option value='all'>All</option>
<option value='ak'>Alaska</option>
<option value='ia'>Iowa</option>
</select>
<span id="mycityselect">
<select id="cities">
<option value=''></option>
</select>
</span>
</head>
</html>
////////////////////////test.php///////////////////
<?php
if($_GET[state] == "all"){
$what = "<select id='cities'>
<option value='Fairbanks'>Fairbanks</option>
<option value='Barrow'>Barrow</option>
<option value='Ames'>Ames</option>
<option value='Des Moines'>Des Moines</option>
</select>";
}else if($_GET[state] == "ak"){
$what = "<select id='cities'>
<option value='Fairbanks'>Fairbanks</option>
<option value='Barrow'>Barrow</option>
</select>";
}else if($_GET[state] == "ia"){
$what = "<select id='cities'>
<option value='Ames'>Ames</option>
<option value='Des Moines'>Des Moines</option>
</select>";
}
echo "$what";
?>
1: 2: 3: 4: 5: 6: 7: 8: 9: 10: 11: 12: 13: 14: 15: 16: 17: 18: 19: 20: 21: 22: 23: 24: 25: 26: 27: 28: 29: 30: 31: 32: 33: 34: 35: 36: 37: 38: 39: 40: 41: 42: 43: 44: 45: 46: 47: 48: 49: 50: 51: 52: 53: 54: 55: 56: 57: 58: 59: 60: 61: 62: 63: 64: 65: 66: 67: 68: 69: 70: 71: 72: 73: 74: 75: 76: 77: 78: 79: 80: 81: 82: 83: 84:
by: dereshPosted on 2007-12-27 at 08:59:15ID: 20535220
firstly, you could use some of the JS/AJAX libraries, like prototype/scriptaculous, JQuery, YUI etc. Any one of those should shorten your development cycles. For examples you should look in their sites, al of them has a bunch of examples.
As for your problem you should attach ajax request on onchange event of your first select box and your ajax request should return some JSON encoded data ( it's easier that way to update several objects in DOM of your HTML page). I attached a simple JS code that should be executed on data returned from your ajax request ( data containes updated select fields in JSON)
Select allOpen in new window