How can we access the value of a radio button using the DOM?

How can we access the value of a radio button using the DOM?

How can we access the value of a radio button using the DOM?

For eg. we have the radio button as :

They are inside a form with name form1. When I try

document.getElementByName("sex").value  

it returns 'male' always irrespective of the checked value.

Answer by Mark Biek for How can we access the value of a radio button using the DOM?

There are a couple of ways.

1. Put an id on each input

Then you can use document.getElementById("sex_male")

2. Use something like PrototypeJS (jQuery works too)

Then you can do something like this:

//This loops over all input elements that have a name of "sex"  $$('input[name="sex"]').each( function(elem) {    //Do something  });  

Or even this to get at just the "male" radio button:

$$('input[name="sex"][value="male"]').each(function(elem) {    //Do something  });  

An easy way to get started with Prototype is include it from Google by adding this between the tags of your page:

Answer by Diodeus for How can we access the value of a radio button using the DOM?

If you use document.form1.sex, you are returned an array.

document.form1.sex[0] = first radio button

document.form1.sex[1] = second radio button

To check which is checked you need to loop:

whoChecked(document.form1.sex)    function whoChecked(fieldName) {     for(var x=0;x

Answer by eteubert for How can we access the value of a radio button using the DOM?

If you need the selected one, most frameworks support functionality like this:

//jQuery  $("input[name='sex']:checked").val()  

Answer by Manu for How can we access the value of a radio button using the DOM?

var list = document.getElementsByName('sex');  for(var i=0;i

Answer by bobince for How can we access the value of a radio button using the DOM?

document.getElementByName("sex").value  

You mean getElementsByName('sex')[0].value? (There's no getElementByName.)

That will of course always pick the first input element with that name???the one whose value is indeed male. You then check to see if it's selected by using the ?.checked? property.

For this simple case you can get away with:

var sex=

document.getElementsByName("sex")[0].checked? 'male' : 'female';

For the general case you have to loop over each radio input to see which is checked. It would probably be better to get the form object first (putting an id on the form and using document.getElementById is generally better than using the ?name?-based document.forms collection), and then access form.elements.sex to get the list, in case there are any other elements on the page that have name="sex" attributes (potentially other things than form fields).

Answer by Canavar for How can we access the value of a radio button using the DOM?

You can get your selected radio's value by this method :

Answer by Jarret Hardie for How can we access the value of a radio button using the DOM?

If you want the selected one, but don't have a framework handy, you can iterate over the element array looking for whichever one is checked:

for (var i = 0; i < document.form1.sex.length; i++) {      if (document.form1.sex[i].checked) alert(document.form1.sex[i].value);  }  

Answer by Canuckster for How can we access the value of a radio button using the DOM?

Just to "generify" Canavar's very helpful function:

function getRadioValue(theRadioGroup)  {      var elements = document.getElementsByName(theRadioGroup);      for (var i = 0, l = elements.length; i < l; i++)      {          if (elements[i].checked)          {              return elements[i].value;          }      }  }  

... which would now be referenced thusly:

getRadioValue('sex');  

Strange that something like this isn't already a part of prototype.js.

Answer by CrandellWS for How can we access the value of a radio button using the DOM?

Loops can achieve the task, as others have shown but it could be simpler than using a loop, which will help performance if desired. Also, it can be portable/modular so it can be used for different radio groups.

Simple Example

function getValue(x) {    alert(x.value);  }

A more complex example:

function getValue(x){    alert(x.value);  }

    
Sex
    Male:              Female:            
  
    
Age Group
    0-13:              13-18:              18-30:              30+:            

Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72