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-nepaliboy007@yahoo.com |

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

<?

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

#### Copyright reserved to Roshan Bhattarai - nepaliboy007@yahoo.com

#### 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-nepaliboy007@yahoo.com |

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

<?

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

#### Copyright reserved to Roshan Bhattarai - nepaliboy007@yahoo.com

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.