Sunday, January 3, 2010

How to validate radio button group in JavaScript

How to Validate Radio Button Group using JavaScript?

Following example shows you how to validate Radio Button Group using JavaScript as client side validation.
When user have to select only one item from a given item list, You can use radio button group to get the user input. So user can't select more than one item from the given radio button group. Radio button group limits the user selection to a single item. In some cases you may want to use multiple radio buttons to make some selections. As a example you may need to select user's gender (Male or Female). Or you may want to select age group using radio button group. In such cases you should validate radio-selections before submitting the form. Use following multiple radio button validation example to validate a radio button group in JavaScript. Choose the program which best match with your application.

A radio button contains more than one radio buttons. Simply array of radio buttons. All radio buttons have the same name but different ids and values. The name of the radio button group is use to group the radio buttons. First of all you have to find how many radio buttons in the group. Then you have to check which radio button is clicked and get the value of it. You can use the bellow JavaScript program to validate multiple radio button group.

1. Example how to validate multiple radio button group using JavaScript.

Imagine that you are creating a web application for collect the details of programmers. So you need to know their programming language,programming are such as web-application or desktop application development. Also you need to get gender, age group and experience in years. Following live example completely describes you to perform the task using JavaScript

Programmer Details
Select a programming language







 
Select programming are




Your Gender



Age group





 

Copy and paste bellow code for validate radio button group

<!DOCTYPE HTML>
<html>
<head>
<title>Validate List Box</title>
<style type="text/css">
.ex_table{font-family:Verdana, Geneva, sans-serif;font-size:12px;}
.normal_p{
color:#000000;
}
.error_p{
color:#F00;
}
</style>
<script type="text/JavaScript">
function select_radio_button(group_p){
document.getElementById(group_p).className='normal_p';
}

function is_selected(rb_group,lbl_info){
var radio_group =document.getElementsByName(rb_group);
for(var x=0;x<radio_group.length;x++){
if(radio_group[x].checked){
document.getElementById(lbl_info).className='normal_p';
return 0;
}
}
document.getElementById(lbl_info).className='error_p';
return 1;
}

function validate_radiobutton_group(){
var error=0;

error+=is_selected("rbg_programming_language","programming_language_info");
error+=is_selected("rbg_programming_area","programming_area_info");
error+=is_selected("rbg_gender","gender_info");
error+=is_selected("rbg_age_group","age_group_info");

if(error>0){
alert("Please fill form details correctly");
return false;
}else{
return true;
}
}
</script>
</head>
<body>
<form id="radio_button_group_validation_1" name="radio_button_group_validation_1" action="#" method="post" onSubmit="JavaScript:return validate_radiobutton_group();">
<table border="0" class="ex_table"><tbody>
<tr>
<td colspan="6" align="left">Programmer Details</td></tr>
<tr>
<td align="right">Select a programming language</td>
<td><p id="programming_language_info">
<label><input type="radio" name="rbg_programming_language" onChange="JavaScript:select_radio_button('programming_language_info');" value="1" id="rbg_programming_language_0">PHP</label>
<br>
<label><input type="radio" name="rbg_programming_language" onChange="JavaScript:select_radio_button('programming_language_info');" value="2" id="rbg_programming_language_1">Java</label>
<br>
<label><input type="radio" name="rbg_programming_language" onChange="JavaScript:select_radio_button('programming_language_info');" value="3" id="rbg_programming_language_2">C#</label>
<br>
<label><input type="radio" name="rbg_programming_language" onChange="JavaScript:select_radio_button('programming_language_info');" value="4" id="rbg_programming_language_3">VB.Net</label>
<br>
<label><input type="radio" name="rbg_programming_language" onChange="JavaScript:select_radio_button('programming_language_info');" value="5" id="rbg_programming_language_4">Perl</label>
<br>
<label><input type="radio" name="rbg_programming_language" onChange="JavaScript:select_radio_button('programming_language_info');" value="6" id="rbg_programming_language_5">C++</label>
<br>
</p></td>
<td colspan="2" rowspan="6">&nbsp;</td>
</tr>
<tr>
<td align="right">Select programming are</td>
<td><p id="programming_area_info">
<label>
<input type="radio" name="rbg_programming_area" onChange="JavaScript:select_radio_button('programming_area_info');" value="1" id="rbg_programming_area_0">
Web Application</label>
<br>
<label>
<input type="radio" name="rbg_programming_area" onChange="JavaScript:select_radio_button('programming_area_info');" value="2" id="rbg_programming_area_1">
Desktop Application</label>
<br>
<label>
<input type="radio" name="rbg_programming_area" onChange="JavaScript:select_radio_button('programming_area_info');" value="3" id="rbg_programming_area_2">
Mobile Application</label>
<br>
</p></td>
</tr>
<tr>
<td align="right">Your Gender</td>
<td><p id="gender_info">
<label>
<input type="radio" onChange="JavaScript:select_radio_button('gender_info');" name="rbg_gender" value="1" id="rbg_gender_0">
Male</label>
<br>
<label>
<input type="radio" onChange="JavaScript:select_radio_button('gender_info');" name="rbg_gender" value="2" id="rbg_gender_1">
Female</label>
<br>
</p></td>
</tr>
<tr>
<td align="right">Age group</td>
<td><p id="age_group_info">
<label>
<input type="radio" name="rbg_age_group" onChange="JavaScript:select_radio_button('age_group_info');" value="1" id="rbg_age_group_0">
18-24</label>
<br>
<label>
<input type="radio" name="rbg_age_group" onChange="JavaScript:select_radio_button('age_group_info');" value="2" id="rbg_age_group_1">
25-30</label>
<br>
<label>
<input type="radio" name="rbg_age_group" onChange="JavaScript:select_radio_button('age_group_info');" value="3" id="rbg_age_group_2">
31-39</label>
<br>
<label>
<input type="radio" name="rbg_age_group" onChange="JavaScript:select_radio_button('age_group_info');" value="4" id="rbg_age_group_3">
40-50</label>
<br>
</p></td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td><input type="submit" name="btn_submit2" id="btn_submit2" value="Submit"></td>
</tr>
<tr>
<td colspan="4" align="right">&nbsp;</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

2. How to get the number of radio buttons in the radio button group using JavaScript?

In many cases you may need to check the number of radio buttons in the radio button, that means count the number of radio buttons. Following JavaScript code shows you how to count items in a radio button group.

What is the best search engine?






 
 

Sample JavaScript code to get the radio button count.

<!DOCTYPE HTML>
<html>
<head>
<title>Validate List Box</title>
<style type="text/css">
.ex_table{font-family:Verdana, Geneva, sans-serif;font-size:12px;}
.normal_p{
color:#000000;
}
.error_p{
color:#F00;
}
</style>
<script type="text/JavaScript">
function get_the_total_items(){
var rb_group = document.getElementsByName("search_engine");
var group_size = rb_group.length;
alert("There are "+group_size+" radio buttons in the radio button group");
}
</script>
</head>
<body>
<form id="radio_button_group_validation_2" name="radio_button_group_validation_2" action="#" method="post" onSubmit="JavaScript:return validate_radiobutton_group();">
<table border="0" class="ex_table"><tbody>
<tr>
<td colspan="6" align="left">Programmer Details</td></tr>
<tr>
<td align="right">What is the best search engine?</td>
<td><p>
<label>
<input type="radio" name="search_engine" value="1" id="search_engine_0">
Google</label>
<br>
<label>
<input type="radio" name="search_engine" value="2" id="search_engine_1">
Bing</label>
<br>
<label>
<input type="radio" name="search_engine" value="3" id="search_engine_2">
Yahoo</label>
<br>
<label>
<input type="radio" name="search_engine" value="4" id="search_engine_3">
Altvista</label>
<br>
<label>
<input type="radio" name="search_engine" value="5" id="search_engine_4">
Ask</label>
<br>
</p></td>
<td colspan="2" rowspan="6">&nbsp;</td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td><input type="button" name="btn_count" id="btn_count" value="Find Items" onClick="JavaScript:get_the_total_items();"></td>
</tr>
<tr>
<td colspan="4" align="right">&nbsp;</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

3. How to get the checked radio button and its value using JavaScript?

This code explains you to get the checked radio button and its value in a radio button group.

What is the best web browser?






 
 

Code for get checked radio button's value using JavaScript

<!DOCTYPE HTML>
<html>
<head>
<title>Validate List Box</title>
<style type="text/css">
.ex_table{font-family:Verdana, Geneva, sans-serif;font-size:12px;}
.normal_p{
color:#000000;
}
.error_p{
color:#F00;
}
</style>
<script type="text/JavaScript">
function get_selected_radio_button(){
var rb_group = document.getElementsByName("internet_browser");
for(var i=0;i<rb_group.length;i++){
if(rb_group[i].checked){
alert("You have selected ("+rb_group[i].value+") "+rb_group[i].parentNode.textContent+" as the best internet browser");
return;
}
}
alert("You did not selected any internet browser\nPlease select one");
}
</script>
</head>
<body>
<form id="radio_button_group_validation_3" name="radio_button_group_validation_3" action="#" method="post" onSubmit="JavaScript:return validate_radiobutton_group();">
<table border="0" class="ex_table"><tbody>

<tr>
<td align="right">What is the best web browser?</td>
<td><p>
<label><input type="radio" name="internet_browser" value="1" id="internet_browser_0">Google Chrome</label>
<br>
<label><input type="radio" name="internet_browser" value="2" id="internet_browser_1">Mozilla Firefox</label>
<br>
<label><input type="radio" name="internet_browser" value="3" id="internet_browser_2">Internet Explorer</label>
<br>
<label><input type="radio" name="internet_browser" value="4" id="internet_browser_3">Opera</label>
<br>
<label><input type="radio" name="internet_browser" value="5" id="internet_browser_4">Apple Safari</label>
<br>
</p></td>
<td colspan="2" rowspan="6">&nbsp;</td>
</tr>
<tr>
<td align="right">&nbsp;</td>
<td><input type="button" name="btn_count" id="btn_count" value="Get the checked" onClick="JavaScript:get_selected_radio_button();"></td>
</tr>
<tr>
<td colspan="4" align="right">&nbsp;</td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

9 comments:

Jeremy said...

Your HTML code is missing the form tag.

Hanzala Subhani said...

I have used your code this is pretty nice thanks for that

Dhaval loves only hacking nothingelse said...

Thnx a lot yar for this coding ....
this help me a lot and saved my time....

Anya M said...

Hello, is it possible to modify the script, so that based on the selection in every set of radio buttons (let's say "Java", "Web application", "Male" and "18-24"), on clicking the submit button one would go to "page1.html" and in case
of a different combination one would go to "page2.html" and so forth?
I'd very much appreciate your input!

Anonymous said...

Thanks for your useful code.

Ahmad Zafrullah said...

there was a problem when only 1 radio button on a group, the Radio object length return "undefined"

Durga Prasanna Acharya said...

it is nice ..really awesome ...
but one thing that is " i want to select at least one radio button group or all radio button groups " .

for example there are " 50 radio button group " in the context.every radio button group contain 4 radio buttons it self..i want to select only " 20 RADIO BUTTON GROUP " how ? plz suggest me..

shekyn chipsmore said...

can i get text/css code ??

Anonymous said...

Thank you for the great example. How would you validate if there are text fields that are required in your age, gender, programming example.