Strange ajax problem

JavaScript
1

Hi

I face a strange problem in ajax. From one US state it works fine, from other it does not. It is state city auto populated code.

Here is the state drop-down menu


<script type="text/javascript" src="select-ajax-function-city.js"></script>

<select name="StateID" id="StateID" class="filefield-field" onchange="showCity(this.value)">
<option value="">Select State</option>
</select>

Here is select-ajax-function-city.js


var xmlhttp;
function showCity(str){
	xmlhttp=GetXmlHttpObject();
	if (xmlhttp==null){
	  alert ("Browser does not support HTTP Request");
	  return;
	}
	var url="get-city.php";
	url=url+"?p="+str;
	url=url+"&tid="+Math.random();
	xmlhttp.onreadystatechange=stateChanged;
	xmlhttp.open("GET",url,true);
	xmlhttp.send(null);
}

function stateChanged(){
	if (xmlhttp.readyState==4){
		document.getElementById("CityID").innerHTML=xmlhttp.responseText;
	}
}
function GetXmlHttpObject(){
	if (window.XMLHttpRequest){
	  // code for IE7+, Firefox, Chrome, Opera, Safari
  		return new XMLHttpRequest();
  	}
if (window.ActiveXObject){
  // code for IE6, IE5
  return new ActiveXObject("Microsoft.XMLHTTP");
  }
return null;
}

Here is get-city.php


<?php
$p=$_GET["p"];
$con = mysql_connect('localhost', 'root', '');
if (!$con){
  die('Could not connect: ' . mysql_error());
}

mysql_select_db("support_your_sponsors", $con);
	$result_city = mysql_query("SELECT CityID, City FROM city WHERE StateID = '$p'");
	if(empty($q))
		echo "<option value=" . "" .">" . "Select a City" . "</option>";
	while($row_city = mysql_fetch_array($result_city)){
		$CityID = $row_city["CityID"];
		$City = $row_city["City"];
		echo "<option value=" . $CityID .">" . $City . "</option>";
	}
mysql_close($con);
?>

Of course I changes the database connection string accordingly…
Interesting is when one select a state, it populate the city menu perfect, in the same time, others don’t get it, they found city as a blank.

Please help me i would really appreciate your help

Thank you