[RESOLVED] How to use Javascript to get the value of a radio button

[chris1990]

I am trying to use Javascript to get the value of a radio button group.

In my code i have this radio group:

<input type="radio" name="Vehicle" value="Car_Single" onchange="SelectFare()"/>
<input type="radio" name="Vehicle" value="Car_Return" onchange="SelectFare()"/>
<input type="radio" name="Vehicle" value="Estate_Single" />
<input type="radio" name="Vehicle" value="Estate_Return" />
<input type="radio" name="Vehicle" value="Exec_Single" />
<input type="radio" name="Vehicle" value="Exec_Return" />
<input type="radio" name="Vehicle" value="Carrier_Single" />
<input type="radio" name="Vehicle" value="Carrier_Return" />
<input type="radio" name="Vehicle" value="Bus_Single" />
<input type="radio" name="Vehicle" value="Bus_Return" />

I am using this Javascript code, but no message box shows:

 function SelectFare() {	
	alert(document.getElementById("Vehicle").value);	 
 }

I also tried this, but it only gives a message box saying undefined.

 function SelectFare() {	
	alert(document.getElementsByName("Vehicle").value);	 
 }

Thanks in advance, Chris1990.

[chris1990]

I can now get the value of the radio button in to a message box using the code below. However when i use a variable, google chrome gives the error "Uncaught TypeError: Cannot read property 'checked' of undefined".

var Selected = "";
	if (document.getElementsByName("Vehicle")[0].checked == true)	{Selected = document.getElementsByName("Vehicle")[0].value;}
	if (document.getElementsByName("Vehicle")[1].checked == true)	{alert(document.getElementsByName("Vehicle")[1].value);}
	if (document.getElementsByName("Vehicle")[2].checked == true)	{alert(document.getElementsByName("Vehicle")[2].value);}
	if (document.getElementsByName("Vehicle")[3].checked == true)	{alert(document.getElementsByName("Vehicle")[3].value);}
	if (document.getElementsByName("Vehicle")[4].checked == true)	{alert(document.getElementsByName("Vehicle")[4].value);}
	if (document.getElementsByName("Vehicle")[5].checked == true)	{alert(document.getElementsByName("Vehicle")[5].value);}
	if (document.getElementsByName("Vehicle")[6].checked == true)	{alert(document.getElementsByName("Vehicle")[6].value);}
	if (document.getElementsByName("Vehicle")[7].checked == true)	{alert(document.getElementsByName("Vehicle")[7].value);}
	if (document.getElementsByName("Vehicle")[8].checked == true)	{alert(document.getElementsByName("Vehicle")[8].value);}
	if (document.getElementsByName("Vehicle")[9].checked == true)	{alert(document.getElementsByName("Vehicle")[9].value);}
	if (document.getElementsByName("Vehicle")[10].checked == true)	{alert(document.getElementsByName("Vehicle")[10].value);}
	
	alert(Selected);

[tr333]

Firstly, you cant select via document.getElementById() because you haven't specified any id attributes on any of your radio button input elements.

Your 'undefined' error is occurring because you only have 10 radio buttons defined, but you're trying to access 11 radio buttons (0-10 instead of 0-9). Don't forget about the zero-based indexing for the array of radio buttons.

It's probably easier and less error-prone to loop through all the radio buttons and see which are checked:

var radioButtons = document.getElementsByName("Vehicle");
for (var i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
        console.log("radioButton " + i + ": " + radioButtons[i].value);
    }
}

[akhileshbc]

If you are using jQuery, you could do it like this:

var selectedValue = $('input[name=Vehicle]:checked').val();

Live example: http://jsfiddle.net/eJWuT/

[tr333]

If you are using jQuery, you could do it like this:

var selectedValue = $('input[name=Vehicle]:checked').val();

Live example: http://jsfiddle.net/eJWuT/

That will only work if one of the radio buttons is selected. If none are selected, then you will end up with 'undefined'.

[akhileshbc]

An option button is used to select a single value.

So, the "undefined" issue can be cleared using an if statement to check it and alert the user with a message. Like this:

$('#checker').click(function(){ // Whenever a radiobox is clicked, the following code would be executed
    
    var selectedValue = $('input[name=Vehicle]:checked').val(); // get the selected radio box's value
    
    if(selectedValue === undefined) //check if user had selected an option
    {
        alert('Please select an option to continue !');
    }
    else{    
        alert(selectedValue); // display it
    }
    
});

(I have updated the fiddle)

Another option is to put a default selection in one of the option boxes.

[MarkT]

I assume you figured it out by now but you can do it by looping through the radio buttons to check which is selected.

<html>
	<head>
		<title>Radio Button Selection</title>
		<script language="javascript">
		function SelectFare() {
			chosen = ""
			len = document.frm.Vehicle.length

			for (i = 0; i <len; i++) {
				if (document.frm.Vehicle[i].checked) {
					chosen = document.frm.Vehicle[i].value
				}
			}
			alert(chosen) 
		}


		</script>
	</head>
	<body>
		<form name="frm">
			<input type="radio" name="Vehicle" value="Car_Single" onclick="SelectFare()"  />
			<input type="radio" name="Vehicle" value="Car_Return" onclick="SelectFare()" />
			<input type="radio" name="Vehicle" value="Estate_Single" onclick="SelectFare()" />
			<input type="radio" name="Vehicle" value="Estate_Return" onclick="SelectFare()" />
			<input type="radio" name="Vehicle" value="Exec_Single" onclick="SelectFare()" />
			<input type="radio" name="Vehicle" value="Exec_Return" onclick="SelectFare()" />
			<input type="radio" name="Vehicle" value="Carrier_Single" onclick="SelectFare()" />
			<input type="radio" name="Vehicle" value="Carrier_Return" onclick="SelectFare()" />
			<input type="radio" name="Vehicle" value="Bus_Single" onclick="SelectFare()" />
			<input type="radio" name="Vehicle" value="Bus_Return" onclick="SelectFare()" />
		</form>
	</body>
</html>