Change a drop down when other changes in AJAX way

Here we are going to see basic AJAX script in play. Here I’m writing a script which populates a drop down box with states according to the countries selected in another drop down. So let’s see how it is done.

Given below are the drop downs in play (Note: I’ve only used a few data)

Country: <select name="country" onchange="return onchangeajax(this.value);" >
 <option value=""   selected="selected" >Select</option>
 <option value="USA"  >USA</option>
 <option value="India"  >India</option>
 <option value="UK"  >UK</option>
 </select><br />
 State: <div id="statediv"><input type="text" name="state" /></div>
 <input type="submit" name="signupsubmit" value = "Sign Up" />

Now as we see we have written a JavaScript function call on changing the items in drop down. Given below is the Ajax code to be embedded in the page.

function onchangeajax(pid)
 {
 xmlHttp=GetXmlHttpObject()
 if (xmlHttp==null)
 {
 alert ("Browser does not support HTTP Request")
 return
 }

 var url="changestate.php"
 url=url+"?pid="+pid
 url=url+"&sid="+Math.random()
 document.getElementById("statediv").innerHTML='Please wait..<img border="0" src="images/ajax-loader.gif">'
 if(xmlHttp.onreadystatechange=stateChanged)
 {
 xmlHttp.open("GET",url,true)
 xmlHttp.send(null)
 return true;
 }
 else
 {
 xmlHttp.open("GET",url,true)
 xmlHttp.send(null)
 return false;
 }
 }

 function stateChanged()
 {
 if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
 {
 document.getElementById("statediv").innerHTML=xmlHttp.responseText
 return true;
 }
 }

 function GetXmlHttpObject()
 {
 var objXMLHttp=null
 if (window.XMLHttpRequest)
 {
 objXMLHttp=new XMLHttpRequest()
 }
 else if (window.ActiveXObject)
 {
 objXMLHttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
 return objXMLHttp;
 }
</script>

Now we see that in the Ajax script it is calling another file ‘changestate.php’. This is the file which has the code that should populated in the ‘statediv’

<?php
 $val=$_REQUEST['pid'];
 if($val == 'USA')
 {
?>
<select name="state">
 <option value="">--Select--</option>
 <option value="Alabama">Alabama</option>
 <option value="Alaska">Alaska</option>
</select>
<?php
 }
 else if($val == 'India')
 {
?>
<select name="state">
 <option value="">--Select--</option>
 <option value="Karnataka">Karnataka</option>
 <option value="Kerala">Kerala</option>
</select>
<?php
 }
 else
 {
?>
<input type="text" name="state" />
<?php
 }
?>

[/sourcecode]

Advertisement