Jump to content

access checked radio button in radio group?


Recommended Posts


This is the first time I have posted to this forum. I have been developing javascript and php

in web related context for some time. But there is always some detail that gets solved at

some point, but solution is buried in old code somewhere.


I am currently trying to get javascript to set a hidden field from the selection a user makes

from a set of radio buttons.


I have googled around and found some reference an a clue in "current value" but that won't

fly in javascript, and the actual syntax was not provided......



here is some code


var closeSAOOpt = function() { var opt = document.forms.script.openOpt.currentValue alert(opt) }


alert in code above produces "undefined".


I know one of the radios is checked.

I have varified that openOpt is in fact the radio group name and that it is assigned

to both radio button name values.


I know the document.forms.script is defined, and that javascript won't accept

spaces in variable names. So I have assumed 'current value' is currentValue in


But what "undefined" is referring to is often not obvious.


The funtion above is called in an eventlistener attached to a button element labeled "Done"


Can I get a hand with this from someone?


Thank you for time and attention.

Link to comment
Share on other sites

The syntax you're using is non-standard and very old. Learn DOM methods to access elements: http://www.w3schools.com/js/js_htmldom.asp


For a list of radio buttons something like this would work:

<div id="radio-buttons">  <label><input type="radio" value="1"> Something</label>  <label><input type="radio" value="2"> Something else</label></div>

Now you can use DOM methods to get to to radio buttons and check whether they're selected or not.

var radioButtons = document.getElementById("radio-button").getElementsByTagName("input");for(var i = 0; i < radioButtons.length; i++) {  if(radioButtons[i].checked) {    // Do something here with the radio button that is currently selected    alert(radioButtons[i].value);  }}
Link to comment
Share on other sites

I am already aware of the looping through radiogroup appoach.

I had developed a more direct method where the value of the selected radio button exists in the sturcture of the object itself.


But it has been several years since I came on that and it is buried somewhere. I have since written many thousands of

lines of javascript since then. It looks like I might have to do some 'archeology' in my own records.


I seem to remember assessing selectedIndex or some such property that represented the index of the selected element.

The line of code was one line, albeit long, but bypassed the need to loop through to find it.


Thanks for response


Link to comment
Share on other sites

I don't think that there is actually a standard way to do that.


selectedIndex is a property of the <select> element, which makes a dropdown show up on the page. If you have a dropdown you can access the selected value with its value property, or you can access the <option> element by using the options[] property.

var sel = document.getElementsByTagName("select")[0];alert(sel.value);console.log(sel.options[sel.selectedIndex]);
Link to comment
Share on other sites

Well, I managed to locate the code that I thought was THE code, but, Moderator, your right; it is for select/option element:




I still seem to remember getting similar syntax for radio groups. Maybe not.

But I think I will bypass this issue and use click event listeners on the radios to set the hidden field value directly.


Thank you for time and attention:


Edit 10/11/2015


Edit +

I had posted code to find selected value in select/option element but it is not working as

it had written it. So I have removed it.


Edited by jekillen
Link to comment
Share on other sites

This is the revised version of the code I posted and then took down because it didn't work.


This does (just to clearify, this is for finding select/option selection value)


argument 'a' would be the document.forms.formName.selectOptionGroupName reference


function _getOptSelect(a) { var group = a; var getSelection = function() { return group.options[group.selectedIndex].value; } this.selectVal = getSelection() }


This is used to create an instance of the object:


var find = new _getOptSelect(<form object reference>)


and the value will be in




Thanks but I don't use jQuery because it seems to me that to use it effectively,

you have to know what it does under the hood. And I am pretty sure that this

is what it does under the hood.

Edited by jekillen
Link to comment
Share on other sites

That inner function is kind of pointless, might as well just do this:

function _getOptSelect(a){  this.selectVal = a.options[a.selectedIndex].value;}
Make sure that a is actually the select element object, not just a text name or something. If you pass an ID to that function then you can use document.getElementById to get the element first.
Link to comment
Share on other sites

Thanks but I don't use jQuery because it seems to me that to use it effectively,you have to know what it does under the hood. And I am pretty sure that thisis what it does under the hood.

I'm confused? Are we discussing radio buttons or select drop down, are you saying the select dropdown js works for radio botton without the need for looping, which jquery does? We already established javascripts way of retriving value from group of elements using a common identifier name, class etc will require looping such as 'for' looping in all cases.
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...