JavaScript read radio button value in IE and FireFox

问题

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?

回答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.

回答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.

回答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>

回答4:

Short & clear on ES-2015, for use with Babel:

function getValueFromRadioButton( name ){
  return [...document.getElementsByName(name)]
         .reduce( (rez, btn) => (btn.checked ? btn.value : rez), null)
}

console.log( getValueFromRadioButton('payment') );

<div>  
  <input type="radio" name="payment" value="offline">
  <input type="radio" name="payment" value="online">
  <input type="radio" name="payment" value="part" checked>
  <input type="radio" name="payment" value="free">
</div>

回答5:

You can try this:

var form = document.querySelector('form#myForm');
var env_value = form.querySelector('[name="env"]:checked').value;

来源：https://stackoverflow.com/questions/25387081/javascript-read-radio-button-value-in-ie-and-firefox

标签

javascript

html

forms

radio-button