function getXMLHTTP() problem in IE????

[StefanRSA]

I have 2 dropdown fields. One for Province and the other for towns.

I am using ajax to populate the towns field depending on the Province field selection.

 

This is all working fine in FF, Safari and even in Chrome... In IE8 NOTHING

happens??????

 

Please have a look and tell me what I am doing wrong????? (Or is this our friend IE8 that is acting up?????)

 

On my form header is the following:

 <script language="javascript" type="text/javascript">
function getXMLHTTP() { //fuction to return the xml http object
	var xmlhttp=false;	
	try{
		xmlhttp=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) {
				// only if "OK"
				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>

 

My two fields on the form:

<!-- Province goes here -->
<tr>
<td>-</td><td>-</td><td>-</td><td><div class="tTip" title="What Province would you like this ad to apear?"><img src="../images/qt.gif" alt="" width="18" height="18"></div></td><td><font size="3" color="red">*</font>Province</td><td>
  <select name="province" id="province" onChange="getCity('../member/townsrc.php?province='+this.value)">
  <option value="0">Select Province</option>
  <option value="1">KwaZulu-Natal</option>
  <option value="2">Western Cape</option>
  <option value="3">Eastern Cape</option>
  <option value="4">Free State</option>
  <option value="5">Gauteng</option>
  <option value="6">Limpopo</option>
  <option value="7">Mpumalanga</option>
  <option value="8">North West</option>
  <option value="9">Northern Cape</option>
  </select>
</td>
</tr>
<!-- Province ends here -->
<!-- Town goes here -->
<tr>
<td>-</td><td>-</td><td>-</td><td><div class="tTip" title="Hey! You should even select the town!"><img src="../images/qt.gif" alt="" width="18" height="18"></div></td><td><font size="3" color="red">*</font>Town</td><td>
  <div id="citydiv"><select name="city">
<option value="0">Select Town</option>
     </select>
</div>

  </td>
</tr>
<!-- Town ends here -->

 

And then my townsrc.php:

<?
include '../incl/config.php';
?>
<? $country=intval($_GET['province']);

$query=("SELECT * FROM search_town 
JOIN search_region ON search_region.regionId=search_town.relRegionId
JOIN search_prov ON search_prov.provId=search_region.relProvId
WHERE search_prov.provId=$country
ORDER BY search_town.townLabel ASC");
$result=mysql_query($query);

?>
<select name="city">
<option value="0">Select Town</option>
<? while($row=mysql_fetch_array($result)) { ?>
<option value="<?echo $row['townLabel'];?>"><?=$row['townLabel']?></option>
<? } ?>
</select>

[StefanRSA]

Anybody???

[StefanRSA]

I am using live validation on the form as well.

If I disable the livevalidation JS all is working fine????

The livevaliation JS also make use of onchange but not for this field.

Please... Can ANYBODY HELP ME?