dropdown with php and ajax - php

Question

For some time I am battling to solve this problem but I am 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 I am not getting anything in my dropdown.
This is what I am 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() { //function 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>

Answer 1

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.

Answer 2

A few things to try:
If you request findcity.php manually in your browser with a city you know exist in the database, will i return the correct HTML?
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.

Answer 3

<input name="acname" type="text" id="acname" value="" maxlength="9">
Account Name </p>
<select name="src">
<option value="number"> :::: Select ::::</option>
<option value="did">DID</option>
<option value="tfn">TFN</option>
</select>
<span id="errmsg"></span> DID/TFN </p>
<select name="did" onchange='OnChange(this.form1.did);' >
<option value=""> :::: Select ::::</option>
<? $qry1 = mysql_query("SELECT * FROM ".NUMBERS." where Flag='1'") or die(mysql_error()) ;
while($res1 = mysql_fetch_array($qry1)) { ?>
<option value="<?=$res1['Numbers'] ?>"><?=$res1["Numbers"]?></option>
<? } ?>
</select>
SOURCE