Page 1 of 1

a problem when pupulate two dropdown list values using Ajax

Posted: Sat Feb 05, 2011 3:40 am
by MGA
hello everyone;
i am new to php and i have the following problem:
i have two drop down lists and the following code is to change the values of the dropdown’s options without refreshing the page using Ajax.The first dropdown is working fine and the problem is that the cities dropdown that is populated from the countries dropdown is not working, so i need to know where is the problem
The values (options) of the dropdown are fetched from the database, the two tables countries and cities are :

Code: Select all

create table Countries(
  Country_Id int not null auto_increment,
  Constraint PK_Cou_Id primary key (Country_Id),
  Country varchar(30)not null,
  Country_Code varchar(5) not null
) 
create table Cities(
  City_Id int not null auto_increment,
  constraint PK_City_Id primary key (City_Id),
  Country_Id int not null,
  constraint FK_Cou_Id foreign key (Country_Id) references Countries(Country_Id),
  City varchar(30)not null
)
this is the form:

Code: Select all

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <link type="text/css" rel="Stylesheet" href="StyleSheet.css" />
    	<script type="text/javascript">
      function loadCities(countryid)
      {
               if(countryid="")
               {
                         document.getElementById("cities".innerhtml)="";
                         return;
               }
               if (window.XMLHttpRequest)
               {
                         xmlhttp = new XMLHttpRequest();
               }
               else
               {
                         xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
               }
               xmlhttp.onreadystatechange=function()
               {
                         if (xmlhttp.readyState==4 && xmlhttp.status==200)
                         {
                                     document.getElementById("cities").innerHTML=xmlhttp.responseText;
                         }
               }
               xmlhttp.open("GET","get_cities.php?countryid="+countryid,true);
               xmlhttp.send();
      }
</script>
</head>
<body>
    <div class="page">
            <form method="post" name="form1">
            	<div id="main">
            			<table>
                			<tr>
                    			<td>
                        			<label>Country</label>
                    			</td>
                    			<td>
                        			<?php
                             				$db=mysql_connect("localhost","root");
                            				mysql_select_db("EMA");
                             				$result=mysql_query("select * from Countries",$db);
                        			?>
                        			<select name="countries" id="countries" onChange="loadCities(this.value)" >
                            			<?php
                                 			while($row=mysql_fetch_array($result))
                                 			{ 
										?>
                                    	<option value=" <?php echo $row['Country_Id']?>" >
                                        	    <?php echo $row['Country']?>
                                    	</option>
                                    	<?php
                                 		} ?>
                        			</select>
                    			</td>
                                <td>
                                    <label>City</label>
                                </td>
                                <td>
                                    	<div id="citydiv">
                                        	<select name="city">
												<option>Select City</option>
        									</select>
                                        </div>
                    			</td>
                			</tr>
            			</table>
            	</div>
            </form>
            </div>
</body>
</html>
The code of the PHP file get_cities.php, which populate the options in the drop down of the state which is fetched from Ajax
this file is findcities.php that fetch the

Code: Select all

<?PHP
     $countryid=intval($_GET['countryid']);
     $con=mysql_connect("localhost","root");
     if(!$con)
     {
              die("Could not connect to mysql database due to :". mysql_error());
     }
     mysql_select_db("EMA",$con);
     $query="select * from Cities where Country_ID = '$countryid'" ;
     $result=mysql_query($query);
?>
<select name="city" >
 <option>Select City</option>
  <?php
       while($row=mysql_fetch_array($result))
       { ?>
           <option value=<?php echo "'.$row['City_Id'].'"?> >
           <?php echo $row['City']?>
           </option>
  <?php } ?>
</select>
the problem is that the cities dropdown is not working i think that the problem is that the Country_Id is not assigned to the countries dropdown lists so that it doesn't return any thing from the get_cities.php .

is the order of the form ,table and div tags affect that or what.

Re: a problem when pupulate two dropdown list values using A

Posted: Sat Feb 05, 2011 6:50 am
by gooney0
I'm unclear as to where this is failing.

I would break this down and debug like so:

Your function is updating something with an ID of "cities" but I don't see any object with this name.

try get_cities.php manually with your browser and make sure it works:

/get_cities.php?countryid=1

If so add some alerts to your javascript to find the issue:

// make sure the countryid is being passed correctly. When working with select you'll often get the selected index not the value of the option.

alert(countryid);

I'm used to doing this with mootools rather than manually so I'm not sure about the rest of the javascript.

Re: a problem when pupulate two dropdown list values using A

Posted: Sat Feb 05, 2011 5:10 pm
by MGA
it seams that the following javascript code was the problem

Code: Select all

if(countryid="")
               {
                         document.getElementById("cities".innerhtml)="";
                         return;
               }
becouse when i tested it with alert(countryid) before this block the countryid was have the right value
but when i put alert(countryid) after this block it was empty and the countryid passed to the get_cities.php alwyes equal to 0
but why this code do that while countryid didn't equal to ""
"cities" is a div that the get_cities.php will echo the second dropdown in this div.

Re: a problem when pupulate two dropdown list values using A

Posted: Sun Feb 06, 2011 4:03 am
by gooney0
Are you sure about the div with an ID of "cities"? There is no such div in the code you've posted here.

If that is not the correct ID you'll get an error.