Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    215
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Getting values from multiple radio sets

    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
    Code:
    <label>
    <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"/>
    </label>
    Radio Set 2
    Code:
    ><label>
    <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" />
    </label>
    JavaScript Code:
    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.

    Thanks,

    Mike

  • #2
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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:

    Code:
    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);

  • #3
    Regular Coder
    Join Date
    May 2005
    Posts
    215
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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.

    Thanks,

    Mike

  • #4
    GŁtkodierer
    Join Date
    Apr 2009
    Posts
    2,127
    Thanks
    1
    Thanked 426 Times in 424 Posts
    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
    Code:
    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;
    }
    Code:
    var checkedRadios = getCheckedRadios();
    for (var i = 0; i < checkedRadios.length; i++) {
    	alert(checkedRadios[i].name + " = " + checkedRadios[i].value);
    }

  • #5
    Banned
    Join Date
    Mar 2009
    Posts
    248
    Thanks
    3
    Thanked 68 Times in 66 Posts
    parallon:

    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.


    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <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;
    				}
    			 labelIndex++;
    			}
    		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);	
    
    </script>
    <style type="text/css">
    
    	 label {font-family: times; font-size: 12pt;}
    	.radio_group {padding-left: 5px; padding-right: 25px;}
    
    </style>
    </head>
    	<body>
    		<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>
    			<br>
    			<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>
    			<br>
    			<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>
    			<br><br>
    			<input type="submit" value="Submit">
    
    		</form>
    	</body>
    </html>
    Last edited by 12 Pack Mack; 07-27-2009 at 04:43 PM.

  • #6
    Regular Coder
    Join Date
    May 2005
    Posts
    215
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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,

    Mike


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •