triple drop down box from the database without refreshing page using Ajax and PHP. I’ve put three drop down of countries , states and cities and the drop down’s value changes without refreshing the page. Now let show you how to create it quickly.
First create the tables of country city and states
First create the following tables of country city and states,
First create the tables of country city and states
First create the following tables of country city and states,
CREATE TABLE `countries` (
`id` int(4) NOT NULL auto_increment,
`countries` varchar(20) NOT NULL default '',
PRIMARY KEY (`id`)
) TYPE=MyISAM ;
CREATE TABLE `states` (
`id` int(4) NOT NULL auto_increment,
`countryid` int(4) NOT NULL,
`statename` varchar(40) NOT NULL,
PRIMARY KEY (`id`)
) TYPE=MyISAM ;
CREATE TABLE `cities` (
`id` int(4) NOT NULL auto_increment,
`city` varchar(50) default NULL,
`stateid` int(4) default NULL,
`countryid` int(4) NOT NULL,
PRIMARY KEY (`id`)
) TYPE=MyISAM ;Now place the following code in the index.php file<form method="post" name="form1">
<table border="0" cellpadding="0" cellspacing="0" width="60%"><tbody>
<tr>
<td width="150">Country</td>
<td width="150"><select style="background-color: #ffffa0" name="country" onchange="getState(this.value)"><option>Select Country</option><option value="1">USA</option><option value="2">Canada</option> </select></td>
</tr>
<tr>
<td>State</td>
<td>
<p id="statediv">
<select style="background-color: #ffffa0" name="state"><option>Select Country First</option> </select></td>
</tr>
<tr>
<td>City</td>
<td>
<p id="citydiv">
<select style="background-color: #ffffa0" name="city"><option>Select State First</option> </select></td>
</tr>
</tbody></table>
</form> in the onChage event of the country drop down getState() function of
the javascript is called which change the options values the State drop
down, let’s look at the code the getState() function. 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);
}
}The code of the PHP file findState.php, which populate the options in the drop down of the state which is fetched from Ajax , is given below<? $country=intval($_GET['country']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('dbname');
$query="SELECT id,statename FROM states 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>In the above states dropdown, getCity() function is called in onChage event with countryId and stateId parameter, now let’s look at the code of the getCity() functionfunction getCity(countryId,stateId)
{
var strURL="City.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);
}
}In the above ajax function, findcity.php is called and this PHP file populate the city dropdown according to the supplied parameters country and state from get method. Now let’s look at the code of findcity.php,<?php $countryId=intval($_GET['country']);
$stateId=intval($_GET['state']);
$link = mysql_connect('localhost', 'root', ''); //changet the configuration in required
if (!$link) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db('db_ajax');
$query="SELECT id,city FROM cities WHERE countryid='$countryId' AND stateid='$stateId'";
$result=mysql_query($query);
?>
<select name="city">
<option>Select City</option>
<?php while($row=mysql_fetch_array($result)) { ?>
<option value><?=$row['city']?></option>
<?php } ?>
</select>