[RESOLVED] IE innerHTML. Urgent help please

[ca87]

I am trying to reset an option drop down list using javascript code which works in FF and Safari but don't get anywhere near working in IE which is driving me mad. the problem i know has to do with innerHTML but i don't know how to fix it.

function resetSizesList(){
  var shapeDiv = document.getElementById('pool'); //id of radio buttons
  var sizeList = document.getElementById('size'); //id of select options
  if(shapeDiv.onchange){//one of the 3 available radio button is changed
      sizeList.innerHTML = ""; //clear and reset the option lists
  
}

hand i call that method here in my html file

<td>
    <div id="shape" class="Pool_Shape">
        <input type="radio" id="pool" value="UKOvalPool" name="Pool_Shape" onchange="resetSizesList()" onclick ="showPoolSize(this.value)">Oval Pool<br>
        <input type="radio" id="pool" value="UKRoundPool" name="Pool_Shape" onchange="resetSizesList()" onclick ="showPoolSize(this.value)">Round Pool<br>
        <input type="radio" id="pool" value="UKRectangularPool" name="Pool_Shape" onchange="resetSizesList()" onclick ="showPoolSize(this.value)">Rectangular Pool<br>

    </div>
    <div id="Shapes" style="display:none">
        <select id = "size" name ="size_In_Feets">

         </select>

     </div>
 </td>

please help its urgent. Thanks in advance

[Kor]

Despite the behavior of the name attribute (which can belong to more than a single element), an id must be unique on document, as it was designed to refer a single element. Same as an ID paper in our real life. As it is about the elements of a form, you may use getElementsByName() instead. And use the common name as argument. But take care: that method returns always a collection (a sort of array), thus you have to circle through the elements of that collection, and to use the index to refer a certain element there.

[ca87]

Despite the behavior of the[........

Here is what i come up with but did not stop the problem in IE.

//function to reset the size drop down menu
function resetSizes(){
  var d = document;	// just to save on typing
  //var shapeDiv = d.getElementById('pool');
  var selectElement = d.getElementById('size'); 
  while (selectElement.childNodes.length) {
        selectElement.removeChild(selectElement.firstChild);
  }
}

But this refuse to work in IE and i don't know what else to do. please help out.

here is the link to my application.Click on the link to open the Calculator.
It works well in FF, Safari and Chrome.

[Fang]

d.getElementById('size').options.length =  null;

[voilajs]

There's a bug in IE makeing innerHTML unpredictable on select elements.
The only solution is to wrap the select in a div and replace the innerHTML of that div.

Hope this helps :-)

[ca87]

d.getElementById('size').options.length =  null;

I only want to reset the select option when one of the radio button is changed. Now, using your suggestion just sets all the select options to "null" which isn't what i want. What i want is to clear up any data in the select option prior to change and then populate it with the values from showPoolSize() below

 function showPoolSize(str){
    if (str==""){
      documtent.getElementById('size').appendChild("");
      return;
  }
  loadScript("selectSize.php?Pool_Shape="+str,function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
          var d = document;
          var s = d.getElementById('size');
          var sizes = eval('('+xmlhttp.responseText+')');
          for (key in sizes) {
              var o = d.createElement('option');
              o.value = key;
              var text = d.createTextNode(sizes[key]);
              o.appendChild(text);
              s.appendChild(o);
          }
      }
      document.getElementById('Shapes').style.display = 'block';
  });
}

below is the html section i am working with

<td>Pool Shape &amp; Size</td>
                                <td>
                                    <div id="shape" class="Pool_Shape">
                                        <input type="radio" value="UKOvalPool" id="pool" name="Pool_Shape" onchange="resetSizes()" onclick ="showPoolSize(this.value)">Oval Pool<br>
                                        <input type="radio" value="UKRoundPool" id="pool" name="Pool_Shape" onchange="resetSizes()" onclick ="showPoolSize(this.value)">Round Pool<br>

                                        <input type="radio" value="UKRectangularPool" id="pool" name="Pool_Shape" onchange="resetSizes()"  onclick ="showPoolSize(this.value)">Rectangular Pool<br>

                                    </div>
                                    <div id="Shapes" style="display:none">
                                        <select id = "size" name ="size_In_Feets">
                                            <!--<option VALUUE ="0" selected>Please select pool size</option>-->

                                         </select>

                                     </div>

                                 </td>

There's a bug in IE makeing innerHTML unpredictable on select elements.
The only solution is to wrap the select in a div and replace the innerHTML of that div.

Hope this helps :-)

The select options were already wrapped in div but still did not fix it.

[voilajs]

Wrapping the options in a div is not the solution I suggested.
You need to wrap the select element and replace everything in that div.

div.innerHTML = '<select><option></option></select>';

[ca87]

Wrapping the options in a div is not the solution I suggested.
You need to wrap the select element and replace everything in that div.

div.innerHTML = '<select><option></option></select>';

Sorry i don't understand you. I am a noob who's learning. are you suggesting that i replace the html code with your suggestion? well, i haven't come across that. Or should it rather be done in javascript?

[Kor]

If you need to remove the options, you can use a simple function like:

function clearChildNodes(parent){
while(parent.hasChildNodes()){
parent.removeChild(parent.childNodes[0]);
}
}

And send the reference of your select element to that function as an argument.

[ca87]

If you need to remove the options, you can use a simple function like:

function clearChildNodes(parent){
while(parent.hasChildNodes()){
parent.removeChild(parent.childNodes[0]);
}
}

And send the reference of your select element to that function as an argument.

Kor, what value should be passed to the parameter? giving that i want to call the function on the radio onchange event. Could you please explain how i should implement it. thanks.

[Kor]

As I wrote the function, you should pass the parent object (the select reference) whose options you want to remove:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function clearChildNodes(parent){
while(parent.hasChildNodes()){
parent.removeChild(parent.childNodes[0]);
}
}
</script>
</head>
<body>
<form action="">
<select id="size" name="size_In_Feets">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<br>
<input type="radio" name="Pool_Shape" onclick="clearChildNodes(this.form['size_In_Feets'])">
<input type="radio" name="Pool_Shape" onclick="clearChildNodes(this.form['size_In_Feets'])">
<input type="radio" name="Pool_Shape" onclick="clearChildNodes(this.form['size_In_Feets'])">
</form>
</body>
</html>

Or, if you intend to use id, you may pass the id to the function, and modify a little bit that function as:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function clearChildNodes(parentID){
var parent=document.getElementById(parentID);
while(parent.hasChildNodes()){
parent.removeChild(parent.childNodes[0]);
}
}
</script>
</head>
<body>
<form action="">
<select id="size" name="size_In_Feets">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<br>
<br>
<input type="radio" name="Pool_Shape" onclick="clearChildNodes('size')">
<input type="radio" name="Pool_Shape" onclick="clearChildNodes('size')">
<input type="radio" name="Pool_Shape" onclick="clearChildNodes('size')">
</form>
</body>
</html>

[ca87]

As I wrote the function, you should pass the parent object (the select reference) whose options you want to remove:

<script type="text/javascript">
function clearChildNodes(parent){
while(parent.hasChildNodes()){
parent.removeChild(parent.childNodes[0]);
}
}
</script>

<input type="radio" name="Pool_Shape" onclick="clearChildNodes(this.form['size_In_Feets'])">
<input type="radio" name="Pool_Shape"

THANK YOU! for taking your time to go up to this extent. That is the one that works but it seems IE has problem with even the both approach. Click on the radio option and then try to select a size; you'll notice in IE 8 and 9 that the size option is completeley empty? try selecting another radio option you still see the same problem, this is really strange!
On the other hand, if i don't add the onchange = "clearChildNodes(this.form['size_In_Feets'])" ofcouse it will only display one set sizes corresponding to the select Radio option.

Everything works just fine in FF, Chrome and Safari!

Here is the code for filling the size list when a radio button is clicked.

function showPoolSize(str){
    if (str==""){
      documtent.getElementById('size').appendChild("");
      return;
  }
  loadScript("selectSize.php?Pool_Shape="+str,function(){
      if (xmlhttp.readyState==4 && xmlhttp.status==200){
          var d = document;
          var s = d.getElementById('size');
          var sizes = eval('('+xmlhttp.responseText+')');
          for (key in sizes) {
              var o = d.createElement('option');
              o.value = key;
              var text = d.createTextNode(sizes[key]);
              o.appendChild(text);
              s.appendChild(o);
          }
      }
      document.getElementById('Shapes').style.display = 'block';
  });
}

if you are wondering what the selectSize.php is? here it is

if(! isset($_SESSION['databaseURL'])){
            include("conf/conf.php");
            $dbConf = new PPConf();
            $databaseURL = $dbConf->get_databaseURL();
            $databaseUName = $dbConf->get_databaseUName();
            $databasePWord = $dbConf->get_databasePWord();
            $databaseName = $dbConf->get_databaseName();


            $connection = mysql_connect($databaseURL,$databaseUName,$databasePWord)or die ("Error while connecting to localhost");

            $db = mysql_select_db($databaseName,$connection) or die ("Error while connecting to database");

            $table = $_REQUEST["Pool_Shape"];
            $query = "SELECT * FROM `$table`";
            $result = mysql_query($query);
            $sizeArray = array('Please select pool size'); //initialize the array since the string value is not on the database
            $counter = 1;
            while($row = mysql_fetch_array($result)){
                $sizeArray[$counter] = $row['sizeMtr'];
                $counter++;
            }
            echo json_encode($sizeArray);
            mysql_close($connection);
    } 

[007Julien]

Others cross brosers methods to remove and reset a drop down list :

// remove 
document.getElementById(id).options.length=0;
// (It's ofen interesting to have an 0 option to force a change)

//build with an objet like your sizes
var i=0;
for (key in sizes) 
   document.getElementById(id).options[i++]=new Option(sizes.key)
// variant
   document.getElementById(id).options[i++]=new Option(sizes.key,sizes.value)

}
see this page

[ca87]

Others cross brosers methods to remove and reset a drop down list :

// remove 
document.getElementById(id).options.length=0;
// (It's ofen interesting to have an 0 option to force a change)

//build with an objet like your sizes
var i=0;
for (key in sizes) 
   document.getElementById(id).options[i++]=new Option(sizes.key)
// variant
   document.getElementById(id).options[i++]=new Option(sizes.key,sizes.value)

}
see this page

THANK YOU! YOU DID IT! it works NOW WITH ALL! Oh What a relief!!!!! But IE8 returns and display the counter (i) at the end of the select menu? why is this and how can i get rid of it?

[007Julien]

It serves as an alternate method of adding/removing options to select.add() and select.remove(), with the main benefit being it works in all browsers out of the box, including in very old, non DOM2 legacy browsers.
It's works too with IE8. I did It with this page. In fact 22 pages and additionnal scripts for Régions, about 100 Départements (first choice) and 36.885 Communes (second choice) !
Courage ...