View Full Version : Getting values from multiple radio sets

07-26-2009, 01:08 AM
Hello all. I am having trouble getting values from multiple radio sets. I know it is probably elementary, but this is the code I am using:

Radio Set 1

<input type="radio" name="radSafe1" value="AR" id="radSafe1" onClick="SetFocus('1_1')"/>&nbsp;</label>&nbsp;&nbsp;<label>
<input type="radio" name="radSafe1" value="Safe" id="radSafe1>&nbsp;&nbsp;<label>
<input type="radio" name="radSafe1" value="NO" id="radSafe1"/>

Radio Set 2

<input type="radio" name="radSafe2" value="AR" id="radSafe2" onClick="SetFocus('1_2')" />&nbsp;</label>&nbsp;&nbsp;<label>
<input type="radio" name="radSafe2" value="Safe" id="radSafe2" />&nbsp;</label>&nbsp;&nbsp;<label>
<input type="radio" name="radSafe2" value="NO" id="radSafe2" />

JavaScript Code:

var vRad_1 = document.getElementById("radSafe1").value
alert("vRad_1 = " + vRad_1)
var vRad_2 = document.getElementById("radSafe2").value
alert("vRad_2 = " + vRad_2)

Well, I am using the alert function to test the values, but no matter what is checked, even if none are, the values for both of them are always "AR".

Any help would be greatly appreciated.



07-26-2009, 01:34 AM
IDs have to be unique. While the browser won't throw an error if they aren't, your getElementById will always just return the first one it finds, so that's why you are always getting "AR".

First step: Remove those IDs.

Second step: Use something like this:

function getCheckedRadio(name) {
var radios = document.getElementsByName(name);
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) return radios[i];

var vRad_1 = document.getCheckedRadio("radSafe1").value;
alert("vRad_1 = " + vRad_1);
var vRad_2 = document.getCheckedRadio("radSafe2").value;
alert("vRad_2 = " + vRad_2);

07-26-2009, 02:32 AM
Thank you for the quick reply. Ok, this code is getting called during Submit, so I need to scroll through 20 radio sets, each containing values of AR, Safe, and NO. So based on your code, you are calling the function and passing it the radio name. The problem is that I need to scroll through all of them and if there are none of them checked in the radio set, then I have the cell containing the radio set highlight. So, I can't explicitely send the name of the radio set to the code. I hope this makes sense.



07-26-2009, 03:32 AM
Well, I did it that way, because that's what you where doing in your first post. If you want to get all those radios in one go, just use something like this

function getCheckedRadios() {
var checkedRadios = [];
var radios = document.getElementsByTagName('input');
for (var i = 0; i < radios.length; i++) {
if (radios[i].type == 'radio' && radios[i].checked) checkedRadios.push(radios[i]);
return checkedRadios;

var checkedRadios = getCheckedRadios();
for (var i = 0; i < checkedRadios.length; i++) {
alert(checkedRadios[i].name + " = " + checkedRadios[i].value);

12 Pack Mack
07-26-2009, 02:52 PM

Try it this way. You may have as many groups of radio buttons as you need, they may be assigned any valid html name, and each group may have any number of buttons.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

var labelIndex = 0;

function validate(radioGroupLabel,radioGroupName){

for (each in radioGroupName)
var nRadioGroup = document.getElementsByName(each);
for (i=0; i<nRadioGroup.length; i++)
if (nRadioGroup[i].checked)
radioGroupName[each] = 1;
radioGroupLabel[labelIndex].style.backgroundColor = "white";
labelIndex = 0;
for (each in radioGroupName)
if (radioGroupName[each] == 0)
alert('You must choose from ' + radioGroupLabel[labelIndex].firstChild.data);
radioGroupLabel[labelIndex].style.backgroundColor = "#ff6347";
return false;
alert('Thank you');
return true;

function init(){

var nForm = document.forms[0];
var radioGroupLabel = [];
var radioGroupName = {};
var nLabel = nForm.getElementsByTagName('label');
for (i=0; i<nLabel.length; i++)
if (nLabel[i].className == "radio_group")
radioGroupLabel[radioGroupLabel.length] = nLabel[i];
var nInput = nForm.getElementsByTagName('input');
for (i=0; i<nInput.length; i++)
if (nInput[i].type == "radio")
radioGroupName[nInput[i].name] = 0;
nForm.onsubmit = function()
return validate(radioGroupLabel,radioGroupName);

navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);

<style type="text/css">

label {font-family: times; font-size: 12pt;}
.radio_group {padding-left: 5px; padding-right: 25px;}

<form action="" method="post">

<label class="radio_group">Group 1:</label>
<label>AR: <input type="radio" name="radSafe1" value="AR"></label>
<label>Safe: <input type="radio" name="radSafe1" value="Safe"></label>
<label>No: <input type="radio" name="radSafe1" value="NO"></label>
<label class="radio_group">Group 2:</label>
<label>AR: <input type="radio" name="radSafe2" value="AR"></label>
<label>Safe: <input type="radio" name="radSafe2" value="Safe"></label>
<label>No: <input type="radio" name="radSafe2" value="NO"></label>
<label class="radio_group">Group 3:</label>
<label>AR: <input type="radio" name="radSafe3" value="AR"></label>
<label>Safe: <input type="radio" name="radSafe3" value="Safe"></label>
<label>No: <input type="radio" name="radSafe3" value="NO"></label>
<input type="submit" value="Submit">


07-26-2009, 10:43 PM
Thank you both for your answer. I will give it a try when I get back to the office on Tuesday or Wednesday.

Thanks again,