Getting the selected radio without using "Id" but "name"

Question

I was trying to get selected radio button by using "document.getElementByName('nameOfradio')" because all of the radio buttons share the same name. But, nothing happened. I tried the same thing with document.getElementById('nameOfradio') and worked well.However, I had to give unique id for all of the radio buttons. So that, it turns ugly when i have 20 radio buttons. As a result, what I wanted is making a shortcut. How can i get the value of selected radio button by using their "name"? Codes;

Html

<input type="radio" name="nameOfradio" value="onm1" /> 1
<input type="radio" name="nameOfradio" value="onm2" /> 2

<input type='button' onclick='radio3()' value='Submit' />
</form>

Ajax(relavant part of radio3())

var radioPushed = document.getElementByName('nameOfradio').value;

var queryString = "?radioPushed=" + radioPushed;//to send the value to another file
ajaxRequest.open("GET", "radio_display.php" + queryString, true);
ajaxRequest.send(null);

As i said document.getElementById worked but it requires too much work:( How can i make it simplier by using common feature of radio buttons, instead of giving them unique id? A short explanation why i could not make it would be very helpful(new in javascript and ajax)

Answer 1

This line:

document.getElementByName('nameOfradio').value

should be:

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

using querySelector

Note that CSS pseudo-classes are accessed by a colon (:).

Answer 2

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

Eg:-

<form>
  <input type="radio" name="gender" value="male"> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other  
</form> 

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

Also, you can add a checked attribute to a default radio button among the group of radio buttons if needed

<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other

Answer 3

Save yourself some pain in the later js dev and use a js library like jQuery. Then you can do something like $('input[name=radioName]:checked').val()

Answer 4

This is exactly why you should use a javascript library.

document.querySelector('input[name=nameOfradio]');

for example is not supported before IE8.

Let the library handle the browser craziness.

In jQuery you can just use $('input[name=radioName]:checked').val() or $("form").serialize() and be done with it.

Answer 5

You can use the class property if your looking for a quick solution. Many elements can have the same class. use the command:

document.getElementsByClass('nameOfradio');

In addition you should use the correct form of getting elements by name which is:

document.getElementsByName('nameOfradio');

You can also use the following code to find the selected radio value as follows:

radioObj=document.getElementsById('nameOfradio');
var radioLength = radioObj.length;
if(radioLength == undefined) {
    if(radioObj.checked) {
        return radioObj.value;
    } else {
        return "";
    }
}
for(var i = 0; i < radioLength; i++) {
    if(radioObj[i].checked) {
        return radioObj[i].value;
    }
}
return "";