Script works in Firefox and Safari but not IE

[mrx]

I have a script I'm using to hide certain form elements when a user checks a check box and show them again when the user unchecks the box. It works in Firefox and Safari but not in IE (curse Internet Explorer!). I'm afraid I'm not as proficient in Javascript as I am in PHP or SQL. In general I prefer to avoid JS all together, but I really want to be able to get these form elements out of the way when they're not needed.

 

If someone would review the script for me and point out whatever is keeping it from working in IE, that'd be great. I'm sure there is some conventional method necessary for IE that I'm missing. The code is as follows.

 

<script type=\"text/javascript\">
function toggle() {
if (document.all || document.getElementsByName) {
if (document.signUp.useBill.checked == true)
hideElement('shipTr');
else
showElement('shipTr');
}
}
function hideElement (elementName) {
var elements = new Array();
elements = document.getElementsByName(elementName);
for (var i = 0; i < elements.length; i++) { 
elements[i].style.display = 'none';
}
}
function showElement (elementName) {
var elements = new Array();
elements = document.getElementsByName(elementName);
for (var i = 0; i < elements.length; i++) { 
elements[i].style.display = '';
}
}
</script>

[haku]

What exactly isn't working?

 

If the problem is that the elements aren't reappearing after disappearing, then maybe trying changing this:

 

elements[i].style.display = '';

 

To this:

 

elements[i].style.display = 'block';

[mrx]

The script works exactly as I want it to in Firefox and Safari, but not at all in IE. In IE, none of the elements will disappear or reappear as intended. Basically, nothing happens at all in IE when I check the check box.

 

I don't know if this matters, but I'm using the following to call the script:

<input type="checkbox" onclick="javascript:toggle()" />

 

And I'm using

<tr name="shipTr">

to define which tables rows contain the elements I want to hide.

[haku]

Try changing this:

 

function toggle() {
if (document.all || document.getElementsByName) {
if (document.signUp.useBill.checked == true)
hideElement('shipTr');
else
showElement('shipTr');
}
}

 

To this:

 

function toggle() {
if (document.signUp.useBill.checked == true)
hideElement('shipTr');
else
showElement('shipTr');
}

[mrx]

That didn't change anything, but it's definitely simpler than what I had before, so I'll keep it like that. It's very strange that it doesn't work in IE...

[haku]

What exactly are the elements you are getting with "getElementsByName"?

 

That function is actually deprecated, which may be your problem.

[haku]

And do you have a link to the page this script is being used on?

[mrx]

Here it is: http://mrx878.net/testSignUp/testSignUp.php

 

I didn't know that was deprecated. What replaced it?

[haku]

I think that may be the problem.

 

Lets try this differently. Change all the tags that say this:

 

<tr class="shipTr">

 

To this:

 

<tr class="shipTr">

 

Then, change this javascript:

 

var elements = new Array();
elements = document.getElementsByName(elementName);
for (var i = 0; i < elements.length; i++) { 
elements[i].style.display = 'none';
}

 

to this:

 

var elements = getElementsByTagName("tr")
for (var i = 0; i < elements.length; i++) { 
if((elements[i].getAttribute && elements[i].getAttribute("class") == "shipTr") || (elements[i].className && elements[i].className == "shipTR"))
{
	elements[i].style.display = 'none';
}
}

 

(you will also have to change the other code that makes the area re-appear)

 

 

 

[haku]

Well the name attribute for the most part has been deprecated in XHTML (which your doctype is). So those tr tags were actually making your xhtml invalid. As well as deprecating that attribute, the getElementsByName was also deprecated, Im guessing because there isn't really a need for it with no name attribute, but I really dont know to tell the truth.

 

The getTagsByName hasn't been replaced per se (that defeats the purpose of deprecating something!), but getElementsByTagName and GetElementByID are two functions that serve a similar function. You can see I used one of them in that script above.

[mrx]

Ok, thanks for the help. I think if I work with the info you gave me I can get it to work.