How to Validate Radio Button Group using JavaScript?
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
<!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"> </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"> </td>
<td><input type="submit" name="btn_submit2" id="btn_submit2" value="Submit"></td>
</tr>
<tr>
<td colspan="4" align="right"> </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.
<!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"> </td>
</tr>
<tr>
<td align="right"> </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"> </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.
<!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"> </td>
</tr>
<tr>
<td align="right"> </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"> </td>
</tr>
</tbody>
</table>
</form>
</body>
</html>
9 comments:
Your HTML code is missing the form tag.
I have used your code this is pretty nice thanks for that
Thnx a lot yar for this coding ....
this help me a lot and saved my time....
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!
Thanks for your useful code.
there was a problem when only 1 radio button on a group, the Radio object length return "undefined"
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..
can i get text/css code ??
Thank you for the great example. How would you validate if there are text fields that are required in your age, gender, programming example.
Post a Comment