Breaking News
Loading...

Populate one Drop-down list from another using Ajax(php)

Share on Google Plus




Required javascript Functions
<script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
                                var xmlhttp=false;          
                                try{
                                                xmlhttp=new XMLHttpRequest();}
                                catch(e)               {                             
                                                try{                                        
                                                                xmlhttp= new ActiveXObject("Microsoft.XMLHTTP");}
                                                catch(e){
                                                                try{
                                                                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
                                                                }
                                                                catch(e1){
                                                                                xmlhttp=false;
                                                                }
                                                }
                                }
                                               
                                return xmlhttp;
    }
                // To populate first dropdown(ex. state dropdown)
                function getState(countryId) {                                  
                                var strURL="findState.php?country="+countryId;
                                var req = getXMLHTTP();                             
                                if (req) {                                              
                                                req.onreadystatechange = function() {
                                                                if (req.readyState == 4) {
                                                                                // only if "OK"
                                                                                if (req.status == 200) {                                                                                  
                                                                                                document.getElementById('statediv').innerHTML=req.responseText;                                                                                  
                                                                                } else {
                                                                alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                                                                                }
                                                                }                                                             
                                                }                                             
                                                req.open("GET", strURL, true);
                                                req.send(null);
                                }                             
                }
// To populate second dropdown  from first(ex. state dropdown)
                function getCity(countryId,stateId) {                     
                                var strURL="findCity.php?country="+countryId+"&state="+stateId;
                                var req = getXMLHTTP();
                               
                                if (req) {
                                               
                                                req.onreadystatechange = function() {
                                                                if (req.readyState == 4) {
                                                                                // only if "OK"
                                                                                if (req.status == 200) {                                                                                  
                                                                                                document.getElementById('citydiv').innerHTML=req.responseText;                                                                                      
                                                                                } else {
                                                                                                alert("There was a problem while using XMLHTTP:\n" + req.statusText);
                                                                                }
                                                                }                                                             
                                                }                                             
                                                req.open("GET", strURL, true);
                                                req.send(null);
                                }
                                                               
                }
</script>


HTML Design:
<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">Country</td>
    <td  width="150"><select name="country" onChange="getState(this.value)">
                <option value="">Select Country</option>
                <option value="1">USA</option>
                <option value="2">Canada</option>
        </select></td>
  </tr>
  <tr style="">
    <td>State</td>
    <td ><div id="statediv"><select name="state" >
                <option>Select Country First</option>
        </select></div></td>
  </tr>
  <tr style="">
    <td>City</td>
    <td ><div id="citydiv"><select name="city">
                <option>Select State First</option>
        </select></div></td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</form>

Create a page findState.php
<? $country=intval($_GET['country']);
$link = mysql_connect('localhost', 'root', ''); //change the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query="SELECT id,statename FROM state WHERE countryid='$country'";
$result=mysql_query($query);

?>
<select name="state" onchange="getCity(<?=$country?>,this.value)">
<option>Select State</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value=<?=$row['id']?>><?=$row['statename']?></option>
<? } ?>
</select>

Create another page find City.php
<? $countryId=intval($_GET['country']);
$stateId=intval($_GET['state']);
$link = mysql_connect('localhost', 'root', ''); //change  the configuration in required
if (!$link) {
    die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query="SELECT id,city FROM city WHERE countryid='$countryId' AND stateid='$stateId'";
$result=mysql_query($query);

?>
<select name="city">
<option>Select City</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['city']?></option>
<? } ?>
</select>
By this code you will get filled State drop-down list on page load and city will populate on change of state. Above code is functional.

If you find any problem in applying this , please comment or write us at www.bel-technology.com .

You Might Also Like

0 comments

Our Logo

Our Logo
Tech Hunters

Like us on Facebook