Inner HTML and Internet Explorer problem

Question

daved83 0 Newbie Poster

15 Years Ago

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? I've heard mixed reports.

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);
  
      }

form

<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>

html-css javascript

2 Contributors
6 Replies
101 Views
1 Day Discussion Span
Latest Post 15 Years Ago Latest Post by Troy III

Troy III 272 Posting Pro

15 Years Ago

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? I've heard mixed reports.
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.

Give that ID of your Select element to TD holding it.
-You're Done!

Troy III 272 Posting Pro

15 Years Ago

Thanks for the reply mate. Tried that already however and no luck. I thought it would work too but what happens is that although the data is retrieved and displayed, the dropdown list disapears.

No, no, no. You've doubled that ID!

Just solved in IE but bet it won't work in Mozilla ha ha

But of course it works! You've just lost your bet right now. Ha ha ha.

Regards.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

daved83 0 Newbie Poster · Answer 1 · 2009-08-27T13:55:41+00:00

Thanks for the reply mate. Tried that already however and no luck. I thought it would work too but what happens is that although the data is retrieved and displayed, the dropdown list disapears.

daved83 0 Newbie Poster · Answer 2 · 2009-08-27T13:58:54+00:00

Just solved in IE but bet it won't work in Mozilla ha ha

daved83 0 Newbie Poster · Answer 3 · 2009-08-27T16:09:10+00:00

Sorry to be back again. I got the first few to dropdowns to work in both browsers by switching the id value to the <td> tag, including the select tags in the php file (example below), and specifying the id from there. The problem with this is that when I need to access these values later they're no longer available!

For example when I need to access the school id to run the getLevel function its no longer available.

I either need a way to maintain the values (id) or store them somehow?? I'm pretty new to this so excuse my inexperience. Any help greatly appreciated.

<?php


$language = $_GET["language"];
$school = $_GET["school"];


mysql_connect("localhost", "root", "filabo01") or die(mysql_error());
  
  mysql_select_db("burkes1_jos") or die(mysql_error());


$query = mysql_query("SELECT s.school
FROM ssa_schoolid AS s, ssa_lang AS l, ssa_course AS c
WHERE l.langtype = '$language'
AND l.langid = c.langid
AND s.schoolid = c.schoolid
GROUP BY s.school")
or die (mysql_error()); 
?>
<select id  = "school" onChange="getAge(this.value)">
<option value ="none selected">Select School</option>
<? while($row = mysql_fetch_array($query)) {
 ?>
   <option value = "<?=$row['school']?>"><?=$row['school']?></option>
   
<? 
} 
?>
</select>

Troy III 272 Posting Pro · Answer 4 · 2009-08-27T17:05:03+00:00

Than give it a new id, and change earlier referenced id of "select" in your script with the new id of "td" holding it, and leave everything else intact.
Use this as you guidance:

<td align="right">Language of interest:</td>
      <td id=optSelect>
      <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>

...

<script type="text/javascript">
function getSchool1(){
            var x=document.getElementById("optSelect");
            var y = // content retrieved; (!) $language
            x.innerHTML=y;
            }
</script>