Jump to content

Triple Drop Down In Php Using Ajax And Javascript!


saravanataee

Recommended Posts

Dear all,

I am actually trying to have triple dropdown in my php form. i.e 1st drop down initially loads with default values and once selecting a value in it, then second dropdown loads based on the value selected in 1st combo, following 3rd combo based on value selected in 2nd combo.

 

I referred this example :

 

http://roshanbh.com.np/2008/01/populate-triple-drop-down-list-change-options-value-from-database-using-ajax-and-php.html

 

The problem is the Source code itself not working.

 

when i run the source code with changes made as specified by the author, i am able to select the first combo with values usa,Canada. but second and third combo does not work..

 

 

My index file is

 

<code><HTML>

<HEAD>

<TITLE>AJAX DEMO</TITLE>

<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;

}

 

function getState(countryId)

{

alert(req.responseText);

 

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);

}

}

 

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>

</HEAD>

<BODY>

<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>

</BODY>

</HTML>

 

</code>

 

findCity.php:

<code>

<!--//---------------------------------+

// Developed by Roshan Bhattarai |

// http://roshanbh.com.np |

// Contact for custom scripts |

// or implementation help. |

// [email protected] |

//---------------------------------+-->

<?

#### Roshan's Ajax dropdown code with php

#### Copyright reserved to Roshan Bhattarai - [email protected]

#### if you have any problem contact me at http://roshanbh.com.np

#### fell free to visit my blog http://php-ajax-guru.blogspot.com

?>

 

<? $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 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>

 

</code>

 

findState.php:

 

<code>

<!--//---------------------------------+

// Developed by Roshan Bhattarai |

// http://roshanbh.com.np |

// Contact for custom scripts |

// or implementation help. |

// [email protected] |

//---------------------------------+-->

<?

#### Roshan's Ajax dropdown code with php

#### Copyright reserved to Roshan Bhattarai - [email protected]

#### if you have any problem contact me at http://roshanbh.com.np

#### fell free to visit my blog http://roshanbh.com.np

?>

<? $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('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>

 

</code>

 

 

Please let me know where the problem is!! or does this script requires any resource.! as a newbie i dont understand the problem exactly by looking at the code.

 

 

 

Thanks!!

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.