problem with dropdown with php and ajax

For some time i am battling to solve this problem but iam not coming to any conclusion so thought to seek some help here. The problem is that i am getting a blank dropdown instead i should get list of cities populated from the database. Database connection is fine but iam not getting anything in my dropdown.

This is what iam doing:

    <?php

require 'includes/connect.php'; - database connection
$country=$_REQUEST['country']; - get from form (index.php)
$q = "SELECT city FROM city where countryid=".$country;    
$result = $mysqli->query($q) or die(mysqli_error($mysqli));    
if ($result) {
?>  
    <select name="city">
    <option>Select City</option>
    $id = 0;
    <?php while ($row = $result->fetch_object()) { 
       $src = $row->city;
       $id = $id + 1;    
    ?>     
    <option value= <?php $id ?> > <?php $src ?></option>
<?php } ?>
</select>
<?php } ?>

ajax script is this:

    <script>
    function getXMLHTTP() { //fuction to return the xml http object
         var xmlhttp=false; 
         try{mlhttp=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 getCity(strURL) {      
         var req = getXMLHTTP();      
         if (req) {       
          req.onreadystatechange = function() {
           if (req.readyState == 4) {        
            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>

This is my form code:

<form method="post" action="" name="form1">
<table width="60%" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="150">Country</td>
    <td  width="150"><select name="country" onChange="getCity('findcity.php?country='+this.value)">
    <option value="">Select Country</option>
    <option value="1">New Zealand</option>
    <option value="2">Canada</option>
        </select></td>
  </tr>
  <tr style="">
    <td>City</td>
    <td ><div id="citydiv"><select name="city">
    <option>Select City</option>
        </select></div></td>
  </tr>

</table>
</form>

From stackoverflow

• A few things to try:

  1. If you request findcity.php manually in your browser with a city you know exist in the database, will i return the correct HTML?

  2. Try with FireBug or another javascript debugger, to set a breakpoint in the onreadystatechange function and see if the returned values are as expected. Set the breakpoint at the first line of the function.

• I think the problem is where you are outputting the <option> tags.

  Try using this block of code between your <select> tags.

      <option>Select City</option>
      <?php 
         $id = 0;
         while ($row = $result->fetch_object()) { 
         $src = $row->city;
         $id = $id + 1;      
      ?>          
      <option value="<?php echo htmlspecialchars($id,ENT_QUOTES) ?>"><?php echo htmlspecialchars($src) ?></option>
  <?php } ?>
  

  Edit: To clarify, you didn't have any echo statements before the $id and $src variables. I added htmlspecialchars() as a habit to produce properly escaped html.