Hi everyone,
I hae created a dropdown menu using ajax where each option is populated dynamically based on the previous choice. It works great on Firefox thanks to help I got on this forum.
It doesn't work on IE however. I believe this is because IE doesn't recognise the innerHTML property when applied to a select tag?
The dropdown option simply fails to populate alhough the AJAX seems to work.
I've changed the id and name properties on the form and tried wrapping each select tag in div tags but no luck so far.
I'm looking for an easy solution to this problem as I've already put an enormous amount of effort into this!
Here's some of my code. Any help much appreciated.
function GetXmlHttpObject(){
var xmlHttp = false;
try{
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP")//For Old Microsoft Browsers
}
catch(e){
try{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP")//For Microsoft IE 6.0+
}
catch(e2){
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined')
{
xmlHttp = new XMLHttpRequest();//For Mozilla, Opera Browsers
}
if(!xmlHttp) { alert("Browser does not support HTTP Request"); }
return xmlHttp;
}
function getSchool1(langID){
var xmlhttp = GetXmlHttpObject();
if(!xmlhttp){ return; }
var url = "findcity.php" +
"?language=" + langID +
"&sid=" + Math.random();
alert(url);
xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState == 4){
document.getElementById("school").innerHTML = xmlhttp.responseText;
document.getElementById("school").disabled = 0;
}
};
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}<head>
<script type = text/javascript src = getschool1.js></script>
<link rel="stylesheet" type="text/css" href="form.css"
</head>
<body>
<form id = 'prices' action="process.php" method="post">
<table>
<td align="right">Language of interest:</td>
<td>
<select id="language" name="language" onChange="getSchool1(this.value)">
<option value="none selected"> --- select --- </option>
<option value="french">French</option>
<option value="german">German</option>
<option value="italian">Italian</option>
<option value="spanish">Spanish</option>
<option value="russian">Russian</option>
</select>
</td>
<tr>
<td align="right">School</td>
<td>
<select id ="school" name ="school" onChange="getAge(this.value)" disabled>
<option value="none selected">Select Language First</option>
</select>
</td>
</tr>
<tr>
<td align="right">Course Type</td>
<td>
<select id = "age" name="age" onChange="getLevel(this.value)" disabled>
<option value="none selected"> Select School First </option>
</select>
</td>
</tr>
<tr>
<td align="right">Class Type</td>
<td>
<select id="level" name="level" onChange="getDuration(this.value)" disabled>
<option value="none selected">Select Course Type First</option>
</select>
</td>
</tr>
<tr>
<td align="right">Duration</td>
<td>
<select id="duration" name="duration" onChange="getPlace(this.value)" disabled>
<option value="none selected">Select Class Type First</option>
</select>
</td>
</tr>
<tr>
<td align="right">Accommodation</td>
<td>
<select id ="place" name ="place" onChange = "getBoard(this.value)" disabled>
<option value="none selected">Select Duration First</option>
</tr>
<tr>
<td align="right">Board</td>
<td>
<select id ="board" name="board" onChange = "getRoom(this.value)" disabled>
<option value="none selected">Select Acc First</option>
</tr>
<td align="right">Room Type</td>
<td>
<select id ="room" name="room" onChange = "getSeason(this.value)" disabled>
<option value="none selected">Select Board First</option>
</tr>
<tr>
<td align="right">Season</td>
<td>
<select id ="season" name="season" disabled>
<option value="none selected">Select Room First</option>
</tr>
</br>
<td align="right">Currency</td>
<td>
<select name="currency" >
<option value="none selected"> --- select --- </option>
<option value="euro">Euro</option>
<option value="sterling">Sterling</option>
<option value="dollar">Dollar</option>
</tr>
<tr>
<td>
<input type="submit" value="submit">
</tr>
</td>
</table>
</body>