[SOLVED] Will not work in IE but does other browsers (Reposted due to error couldnt edit)

[laPistola]

I have an "interactive" contact us form where depending on the subject selection it adds further related form fields.

 

For some reason this will not work in IE7 (not tested on other IE verisons) but will work in other browsers like FireFox and safri

 

Once you change a selction in the subjects drop down field it calls to the javaScript function that inserts the new code into the rows.

 

This is the JavaScript:

function remAdd() {
document.getElementById('ad1').innerHTML = '';
document.getElementById('ad2').innerHTML = '';
document.getElementById('ad3').innerHTML = '';
document.getElementById('pc').innerHTML = '';
}
function subCho() {
var sS = document.getElementById('subject');
var sSt = sS.options[sS.selectedIndex].text;
if (sSt=="Quote") {
	document.getElementById('rangeRow').innerHTML = '<td align="right"><label for="range">Range:</label></td><td> </td><td><select name="range" id="range"><option>AJAX</option></select> <label for="personallised">Personallised stationary?</label> <input type="checkbox" name="personallised" id="personallised" value="yes" /></td>';
	remAdd();
} else if (sSt=="Sample Request") {
	document.getElementById('rangeRow').innerHTML = '<td align="right"><label for="range">Range:</label></td><td> </td><td><select name="range" id="range"><option>AJAX</option></select></td>';
	document.getElementById('ad1').innerHTML = '<td align="right"><label for="address1">Address:</label></td><td> </td><td><input name="address1" type="text" id="address1" size="30" /></td>';
	document.getElementById('ad2').innerHTML = '<td align="right"><label for="address2"> </label></td><td> </td><td><input name="address2" type="text" id="address2" size="30" /></td>';
	document.getElementById('ad3').innerHTML = '<td align="right"><label for="address3">City:</label></td><td> </td><td><input name="address3" type="text" id="address3" size="30" /></td>';
	document.getElementById('pc').innerHTML = '<td align="right"><label for="postcode">Postcode:</label></td><td> </td><td><input name="postcode" type="text" id="postcode" size="10" /></td>';
} else {
	document.getElementById('rangeRow').innerHTML = '';
	remAdd();
}
}

 

I have removed the remAdd(); calls to see if it was a problem with that but it made no difference, i have rechecked all id names over and over and selection text, made sure all the uppercase letters are correct over and over, im generally bathled.

 

When the pages loads the status is Done but once you try and select a subject it changes to error on page.

 

Below is the code is what the JavaScript is targeting

<tr height="0%" id="rangeRow"></tr>
<tr height="0%" id="ad1"></tr>
<tr height="0%" id="ad2"></tr>
<tr height="0%" id="ad3"></tr>
<tr height="0%" id="pc"></tr>

 

Below is code that works perfect on the same page in IE with no errors, its virtually a small verison of the above

 

function otherBox() {
var oS = document.getElementById('hear');
var oSt = oS.options[oS.selectedIndex].text;
if (oSt=='Other') {
	document.getElementById('oB').innerHTML = '<label for="other">if other:</label> <input type="text" name="other" id="other" />';
} else {
	document.getElementById('oB').innerHTML = ' ';
}
}

<em id="oB"> </em>

 

Anyone have any ideas??

 

Thank you!

[roopurt18]

IIRC IE does not like it when you modify an existing table.  It doesn't matter which you use, DOM model or innerHTML, IE farts all over it.

 

One solution is to rebuild the entire table HTML string, from the opening table-tag to the closing table-tag and set the innerHTML of the parent of the table.  This will work in IE.  However since this is a form it may be difficult to preserve the existing form data entered into the fields.

 

Another, simpler method, is to just output the entire table regardless of which subject selection is chosen.  Create the following CSS class:

.hidden { display: none !important; }

 

Then in your JavaScript code, since the entire table is already output, you won't have to set innerHTML at all.  Instead you can just add / remove the hidden class to table rows, cells, or inputs.  Most of the existing JavaScript libraries support addClass(), removeClass, etc.  This is what I'd do.

[laPistola]

Thank you for replying, glad you said DOM as i was just about to try that way. From what i can tell (As i have been messing with it for ages) your 100% (of cause) right unless your targeting an already populated td as below is the code my second function targets and it works perfect

 

<tr>
        <td align="right"><label for="hear">How did you hear about us?:</label></td>
        <td> </td>
        <td><select name="hear" id="hear" onchange="otherBox()">
          <option>Searching Internet</option>
          <option>Recommendation</option>
          <option>Wedding Fair</option>
          <option>Local Advertisement</option>
          <option>Promotion</option>
          <option>Other</option>
        </select>
        <em id="oB"> </em>
          </td>
      </tr>

 

I was thinking about do your hidden trick myself but concided it cheating lol, but now i know its not possible its not cheaping

 

Only thing is i written a big PHP script that handles the form submit which will all have to edited to

 

Ill let you know how i get on

 

Thank you!

[laPistola]

Thank you, it works great now.

 

Just incase anyone is interested or has the same problem this is the javascript code

 

function remAdd() {
document.getElementById('ad1').className = 'hidden';
document.getElementById('ad2').className = 'hidden';
document.getElementById('ad3').className = 'hidden';
document.getElementById('pc').className = 'hidden';
}
function extraCho() {
var sS = document.getElementById('subject');
var sSt = sS.options[sS.selectedIndex].text;
if (sSt=="Quote") {
	document.getElementById('rangeRow').className = '';
	document.getElementById('pB').innerHTML = '<label for="personallised">Personallised stationary?</label> <input type="checkbox" name="personallised" id="personallised" value="yes" />';
	remAdd();
} else if (sSt=="Sample Request") {
	document.getElementById('rangeRow').className = '';
	document.getElementById('ad1').className = '';
	document.getElementById('ad2').className = '';
	document.getElementById('ad3').className = '';
	document.getElementById('pc').className = '';
	document.getElementById('pB').innerHTML = ' ';
} else {
	document.getElementById('rangeRow').className = 'hidden';
	remAdd();
}
}

Obvouisly i written the rows in and added the class name hidden to each row and gave each row an id, other then pB that is an <em id="pB"> inside an already populated cell!

 

Once again thank you, also this way saves me using AJAX to call the range list in i can just use PHP to get the data from the DB.