Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Second Drop down box not displaying city list 1

Status
Not open for further replies.

vishalonne

Technical User
Jul 29, 2012
49
Hi...
After long time I came back.

Actually I am trying to display State and City lsit in 2 drop down box using PHP and Ajax. State and city list is coming from Mysql.
I am able to get the list of state but after changing the state city drop down box in not getting populated by City list. I am using 2 PHP file test.php and show_city.php
Here is the code -
PHP:
<?php
$host="localhost"; // Host name 
$username="cbsecpsn_vishal"; // Mysql username 
$password="most^^@anted123"; // Mysql password 
$db_name="cbsecpsn_cbsecsnip"; // Database name 

mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB");

?>
<html>
<head>
<script type="text/javascript">
// JavaScript Document
var XMLHttpRequestObject=false;
function display(state_id){
   if(window.XMLHttpRequest){
      XMLHttpRequestObject=new XMLHttpRequest();
   }
   else if(window.ActiveXObject){
      XMLHttpRequestObject=new ActiveXObject("Microsoft.XMLHTTP");
   } 
   XMLHttpRequestObject.onreadystatechange=function(){
     if (XMLHttpRequestObject.readyState==4 && XMLHttpRequestObject.status==200)
     {
         document.getElementById("show_city").innerHTML=XMLHttpRequestObject.responseText;
     }
   }
XMLHttpRequestObject.open("GET","show_city.php?state_id="+state_id,true);
XMLHttpRequestObject.send();
}
</script>
</head>
<body>
<form>
<select name="state" onChange="display(this.value)">
<option value="" selected="selected">-- Select state --</option>
<?php
$query="select * from tbl_state";
$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result)){
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['state_name']; ?></option>
<?php
}
?>
</select>
</form>
<br />
<div id="show_city">
<select name="city">
<option value="" selected="selected">-- Select city --</option>
</select>
</div>
</body>
</html>
show_city.php
PHP:
<?php
$host="localhost"; // Host name 
$username="cbsecpsn_vishal"; // Mysql username 
$password="most^^@anted123"; // Mysql password 
$db_name="cbsecpsn_cbsecsnip"; // Database name 

mysql_connect("$host", "$username", "$password")or die("cannot connect"); 
mysql_select_db("$db_name")or die("cannot select DB");

$state_id=$_REQUEST['state_id'];

$query="select * from tbl_city where state_id='$state_id'";

?>
<select name="city">
<option value="" selected="selected">-- Select city --</option>
<?php
$query_result=mysql_query($query)or mysql_error();
while($row=mysql_fetch_array($query_result))
{
?>
<option value="<?php echo $row['id']; ?>"><?php echo $row['city_name']; ?></option>
<?php
}
?>
</select>
SQL:
CREATE TABLE IF NOT EXISTS `tbl_city` (
  `id` int(6) NOT NULL AUTO_INCREMENT,
  `state_id` varchar(6) NOT NULL,
  `city_name` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

CREATE TABLE IF NOT EXISTS `tbl_state` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `state_name` varchar(100) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1;

Please guide me where I am doing mistake...!
 
Assuming your Ajax correctly returns the <option> tags being output by your PHP script the onyl problme I see is here:

Code:
[COLOR=#464646]document[/color].[blue][b]getElementById[/b][/blue]("[red]show_city[/red]").innerHTML=XMLHttpRequestObject.responseText;

Since the only element with an id of 'show_city' I can see is the div that holds your dropdown/select box, that would mean you are trying to add the <option> elements to the div tag directly. But since <option> tags alone aren't displayable, you see nothing, in fact your dropdown should be disappearing.

Probably what you want is:

HTML:
<select name="city" [red]id[/red]=[green][b]"show_citydropdown"[/b][/green]>
<option value="" selected="selected">-- Select city --</option>
</select>

Code:
document.getElementById([green][b]"show_citydropdown"[/b][/green]).innerHTML=XMLHttpRequestObject.responseText;

This approach however is not supported by most versions of Internet Explorer. So you'll likely be better off adding the <option> elements using DOM methods.

Code:
var list = document.getElementById('thedroddown');
var newOp = document.createElement("option");
newOp.text = "Txt";
newOp.value = "1";
list.options.add(newOp);

You'll have to modify your PHP script so it outputs a list of value,item pairs rather than the actual option tags, and then loop through the list to create the new elements for the dropdown as shown above.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech
 
Thnk you for consideration but I solved my problem in another way
 
Status
Not open for further replies.

Part and Inventory Search

Sponsor

Back
Top