JavaScript read radio button value in IE and FireFox

Question

I have a simple web form that uses JavaScript for building a POST statement. In Chrome, I can use a simple line of code...

var form = document.forms['myForm'];
var env = form.env.value;

The form itself looks like this...

<form name="myForm" action='JavaScript:xmlhttpPost("/path/to/some/pythoncode.py")'>
    <input type="radio" name="env" id="env" value="inside">Inside
    <input type="radio" name="env" id="env" value="outside" checked="checked">Outside
    <input type="radio" name="env" id="env" value="both">Both
    <input type="radio" name="env" id="env" value="neither">Neither

I have some text boxes on the form that I can use the same technique to find the value ( var name = form.fname.value with a <input type="text" name="fname" id="fname"> However, when I submit the form and build my post, the value for the radio buttons is always undefined. It works fine in Chrome, but nothing in IE or FireFox.

I tried var env = document.getElementById('env').value, but for some reason that always defaults to the first value (inside) no matter what I select. That method also does not return a value when using Chrome.

Is there something I'm missing for reading the checked value of a radio input in FF or IE?

Solution 1

Try this

function getValueFromRadioButton(name) {
   //Get all elements with the name
   var buttons = document.getElementsByName(name);
   for(var i = 0; i < buttons.length; i++) {
      //Check if button is checked
      var button = buttons[i];
      if(button.checked) {
         //Return value
         return button.value;
      }
   }
   //No radio button is selected. 
   return null;
}

IDs are unique so you should not use the same ID for multiple items. You can remove the all the radio button IDs if you use this function.

Solution 2

You are using the same ID for multiple Elements, ID is unique for element on the page.

use different IDs.

edit: names can be the same. because then the radio buttons are as a group.

Solution 3

As stated, the IDs should be different to be valid, but you could accomplish this by eliminating the IDs all together and using just the input name:

var form = document.forms['myForm'];
var radios = form.elements["env"];
var env = null;
for(var i=0;i<radios.length;i++) {
    if(radios[i].checked == true) {
        env = radios[i].value;
    }
}

<form name="myForm">
<input type="radio" name="env" value="inside">Inside
<input type="radio" name="env" ivalue="outside" checked="checked">Outside
<input type="radio" name="env" value="both">Both
<input type="radio" name="env" value="neither">Neither
</form>

Comments

[camelCase]

Names should be the same

[Omer Bonfil]

yeah, my bad, got carried away.. :-)

[Matt H]

This should work but it just doesn't for me. In IE and FireFox, when I check the value of env, it is always undefined. I'm using this exact syntax too...

[user3357118]

I was incorrect at first. The form.elements['env'] returns an array and you have to iterate over it to find which button is selected. This is similar to what I see @Afsa posted already, but different in that I'm using the form directly rather than querying the DOM for all buttons. This worked correctly in Firefox when changing the selection.

[Matt H]

This is beautiful and works perfectly. Thank you, thank you, thank you.