Radio Button won't work in internet explorer but works fine in firefox

Question

Hi

I have HTML code like so:

function toggle_action(type) {
var tabs = document.getElementsByName("action_tab")
for(var i = 0 ; i < tabs.length; i++){
    //alert(" i = " + i + " length=" + tabs.length );
    if(tabs[i].id == type.value){
        tabs[i].style.display='inline';
    }else{
        tabs[i].style.display='none';
    }
};
}

a

<div id="action_types">
   <input type="radio" checked name="action_type" value="EmailActionDescription"  onclick="toggle_action(this);"/><label>Email</label>
   <input type="radio" name="action_type" value="TicketActionDescription" onclick="toggle_action(this);"/><label>Ticket</label>
</div>

it works fine in firefox but doesn't work in internet explorer.

any ideas what it could be? the buttons basically display one of 2 options, a ticket or e mail, when clicking on the ticket it just doesn't show.

if you require any further information please let me know.

thanks

Answer 1

You don't state which DOCTYPE you're using (if any), but certainly with XHTML attributes have to have values, which your checked attribute doesn't have. You could try this:

<input type="radio" checked="checked" name="action_type" value="EmailActionDescription"  onclick="toggle_action(this);"/><label>Email</label>

Answer 2

Since you don't post your toggle_action() code I can only guess that the problem is in that function. And probably if the function fails, the radiobutton selection routine is canceled.

What do you use the toggle_action() routine for?

Answer 3

var tabs = document.getElementsByName("action_tab")

First, getElementsByName() is broken in IE. Rather use getElementsByTagName() and/or getElementById(). Or better, use jQuery and $('[name=action_tab]').

Second, this sounds like as <div name="action_tab"> and so on. The HTML <div> element doesn't have a specified name attribute and I doubt if a custom name attribute will work that way in IE with getElementsByName().