I’m having some strange problem with my JS program. I had this working properly but for some reason it’s no longer working. I just want to find the value of the radio button (which one is selected) and return it to a variable. For some reason it keeps returning undefined.

Here is my code:

function findSelection(field) { var test = 'document.theForm.' + field; var sizes = test; alert(sizes); for (i=0; i < sizes.length; i++) { if (sizes[i].checked==true) { alert(sizes[i].value + ' you got a value'); return sizes[i].value; } } } 

submitForm:

function submitForm() { var genderS = findSelection("genderS"); alert(genderS); } 

HTML:

<form action="#n" name="theForm"> <label for="gender">Gender: </label> <input type="radio" name="genderS" value="1" checked> Male <input type="radio" name="genderS" value="0" > Female<br><br> <a href="javascript: submitForm()">Search</A> </form> 

21 Answers

This works with any explorer.

document.querySelector('input[name="genderS"]:checked').value; 

This is a simple way to get the value of any input type. You also do not need to include jQuery path.

You can do something like this:

var radios = document.getElementsByName('genderS'); for (var i = 0, length = radios.length; i < length; i++) { if (radios[i].checked) { // do whatever you want with the checked radio alert(radios[i].value); // only one radio can be logically checked, don't check the rest break; } }

<label for="gender">Gender: </label> <input type="radio" name="genderS" value="1" checked="checked">Male</input> <input type="radio" name="genderS" value="0">Female</input>

jsfiddle

Edit: Thanks HATCHA and jpsetung for your edit suggestions.

document.forms.your-form-name.elements.radio-button-name.value 

Since jQuery 1.8, the correct syntax for the query is

$('input[name="genderS"]:checked').val(); 

Not $('input[@name="genderS"]:checked').val(); anymore, which was working in jQuery 1.7 (with the @).

ECMAScript 6 version

let genderS = Array.from(document.getElementsByName("genderS")).find(r => r.checked).value; 

Here's a nice way to get the checked radio button's value with plain JavaScript:

const form = document.forms.demo; const checked = form.querySelector('input[name=characters]:checked'); // log out the value from the :checked radio console.log(checked.value); 

Source:

Using this HTML:

<form name="demo"> <label> Mario <input type="radio" value="mario" name="characters" checked> </label> <label> Luigi <input type="radio" value="luigi" name="characters"> </label> <label> Toad <input type="radio" value="toad" name="characters"> </label> </form> 

You could also use Array Find the checked property to find the checked item:

Array.from(form.elements.characters).find(radio => radio.checked); 

In case someone was looking for an answer and landed here like me, from Chrome 34 and Firefox 33 you can do the following:

var form = document.theForm; var radios = form.elements['genderS']; alert(radios.value); 

or simpler:

alert(document.theForm.genderS.value); 

refrence:

Edit: As said by Chips_100 you should use :

var sizes = document.theForm[field]; 

directly without using the test variable.

Old answer:

Shouldn't you eval like this ?

var sizes = eval(test); 

I don't know how that works, but to me you're only copying a string.

Try this

function findSelection(field) { var test = document.getElementsByName(field); var sizes = test.length; alert(sizes); for (i=0; i < sizes; i++) { if (test[i].checked==true) { alert(test[i].value + ' you got a value'); return test[i].value; } } } function submitForm() { var genderS = findSelection("genderS"); alert(genderS); return false; } 

A fiddle here.

This is pure JavaScript, based on the answer by @Fontas but with safety code to return an empty string (and avoid a TypeError) if there isn't a selected radio button:

var genderSRadio = document.querySelector("input[name=genderS]:checked"); var genderSValue = genderSRadio ? genderSRadio.value : ""; 

The code breaks down like this:

• Line 1: get a reference to the control that (a) is an <input> type, (b) has a name attribute of genderS, and (c) is checked.
• Line 2: If there is such a control, return its value. If there isn't, return an empty string. The genderSRadio variable is truthy if Line 1 finds the control and null/falsey if it doesn't.

For JQuery, use @jbabey's answer, and note that if there isn't a selected radio button it will return undefined.

First, shoutout to ashraf aaref, who's answer I would like to expand a little.

As MDN Web Docs suggest, using RadioNodeList is the preferred way to go:

// Get the form const form = document.forms[0]; // Get the form's radio buttons const radios = form.elements['color']; // You can also easily get the selected value console.log(radios.value); // Set the "red" option as the value, i.e. select it radios.value = 'red'; 

One might however also select the form via querySelector, which works fine too:

const form = document.querySelector('form[name="somename"]') 

However, selecting the radios directly will not work, because it returns a simple NodeList.

document.querySelectorAll('input[name="color"]') // Returns: NodeList [ input, input ] 

While selecting the form first returns a RadioNodeList

document.forms[0].elements['color'] // document.forms[0].color # Shortcut variant // document.forms[0].elements['complex[naming]'] # Note: shortcuts do not work well with complex field names, thus `elements` for a more programmatic aproach // Returns: RadioNodeList { 0: input, 1: input, value: "red", length: 2 } 

This is why you have to select the form first and then call the elements Method. Aside from all the input Nodes, the RadioNodeList also includes a property value, which enables this simple manipulation.

Reference:

Here is an Example for Radios where no Checked="checked" attribute is used

function test() { var radios = document.getElementsByName("radiotest"); var found = 1; for (var i = 0; i < radios.length; i++) { if (radios[i].checked) { alert(radios[i].value); found = 0; break; } } if(found == 1) { alert("Please Select Radio"); } } 

DEMO : [Click Find without selecting any Radio]

Source (from my blog):

Putting Ed Gibbs' answer into a general function:

function findSelection(rad_name) { let rad_val = document.querySelector('input[name=' + rad_name + ']:checked'); return (rad_val ? rad_val.value : ""); } 

Then you can do findSelection("genderS");

lets suppose you need to place different rows of radio buttons in a form, each with separate attribute names ('option1','option2' etc) but the same class name. Perhaps you need them in multiple rows where they will each submit a value based on a scale of 1 to 5 pertaining to a question. you can write your javascript like so:

<script type="text/javascript"> var ratings = document.getElementsByClassName('ratings'); // we access all our radio buttons elements by class name var radios=""; var i; for(i=0;i<ratings.length;i++){ ratings[i].onclick=function(){ var result = 0; radios = document.querySelectorAll("input[class=ratings]:checked"); for(j=0;j<radios.length;j++){ result = result + + radios[j].value; } console.log(result); document.getElementById('overall-average-rating').innerHTML = result; // this row displays your total rating } } </script> 

I would also insert the final output into a hidden form element to be submitted together with the form.

I prefer to use a formdata object as it represents the value that should be send if the form was submitted.

Demo:

let formData = new FormData(document.querySelector("form")); console.log(`The value is: ${formData.get("choice")}`);

<form> <p>Pizza crust:</p> <p> <input type="radio" name="choice" value="regular" > <label for="choice1id">Regular crust</label> </p> <p> <input type="radio" name="choice" value="deep" checked > <label for="choice2id">Deep dish</label> </p> </form>

Using a pure javascript, you can handle the reference to the object that dispatched the event.

function (event) { console.log(event.target.value); } 

If it is possible for you to assign a Id for your form element(), this way can be considered as a safe alternative way (specially when radio group element name is not unique in document):

function findSelection(field) { var formInputElements = document.getElementById("yourFormId").getElementsByTagName("input"); alert(formInputElements); for (i=0; i < formInputElements.length; i++) { if ((formInputElements[i].type == "radio") && (formInputElements[i].name == field) && (formInputElements[i].checked)) { alert(formInputElements[i].value + ' you got a value'); return formInputElements[i].value; } } } 

HTML:

<form action="#n" name="theForm"> 

 document.querySelector('input[name=genderS]:checked').value 

I like to use brackets to get value from input, its way more clear than using dots.

document.forms['form_name']['input_name'].value; 

 <input type=radio name=rdbExampleInfo id=rdbExamples value="select 1"> <input type=radio name=rdbExampleInfo id=rdbExamples value="select 2"> <input type=radio name=rdbExampleInfo id=rdbExamples value="select 3"> <input type=radio name=rdbExampleInfo id=rdbExamples value="select 4"> 

etc then use just

 $("#rdbExamples:checked").val() 

Or

 $('input[name="rdbExampleInfo"]:checked').val(); 

 var value = $('input:radio[name="radiogroupname"]:checked').val();