Validation (checking ) of period button on submit of Form

Period buttons are used when the visitor has to select one of the many options available. For example in a signup form the visitor has to select the sex by clicking on Male or Female selection. In different cases there can be more than two options also.

<input type=radio name=r1 value=my_r1> my_r1
<input type=radio name=r1 value=my_r2> my_r2
<input type=radio name=r1 value=my_r3> my_r3

<input type=button name=b1 id=b1 value=Submit onClick=my_check()>

As the name of the three radio buttons are common, we get an array by using getElementsByName.

var my_r = document.getElementsByName('r1'); // array of radio buttons

We can get number of elements or number of radio buttons by using length property

my_r.length // 3

If 2nd radio button is selected then the value of my_r[1].checked will be true.

We can get the value of radio button by using my_r[1].value

Getting checked radio button value

<input type=radio name=r1 value=my_r1> my_r1
<input type=radio name=r1 value=my_r2> my_r2
<input type=radio name=r1 value=my_r3> my_r3

<input type=button name=b1 id=b1 value=Submit onClick=my_check()>
<br>
<div id=d1>Output here </div>
<script type="text/javascript">
function my_check(){
var my_r = document.getElementsByName('r1'); // array of radio buttons

for(i=0;i<my_r.length;i++){
	if(my_r[i].checked){
	  document.getElementById('d1').innerHTML=my_r[i].value
	}
}

}
</script>

How to check if any radio button is selected or not ?

<input type=radio name=r1 value=my_r1> my_r1
<input type=radio name=r1 value=my_r2> my_r2
<input type=radio name=r1 value=my_r3> my_r3

<input type=button name=b1 id=b1 value=Submit onClick=my_check()>
<br>
<div id=d1>Output here </div>
<script type="text/javascript">
function my_check(){
var my_r = document.getElementsByName('r1'); // array of radio buttons
flag=0
for(i=0;i<my_r.length;i++){
	if(my_r[i].checked){
		flag=1
	}
}
if(flag==1){
document.getElementById('d1').innerHTML=" Radio button is Selected"
}else{
document.getElementById('d1').innerHTML=" Radio button is NOT Selected"
}

}
</script>

Example

For example mode of payment can be any one of the options saying cash, check, draft, credit card, or wire transfer. We can select one of the options out of many choices. We can check or validate the submission by checking any selection is made or not. The form will not be submitted if no selection is made.

Please note that we will be using client side JavaScript validation so if the user browser has disabled JavaScript then we can't detect the status of the selection by the user and the form will simply submit. For this reason many scripts use server side validations. In server side validation the data has to go and return from server so it takes time. JavaScript validation in client side is fast and we also can detect the JavaScript setting of the browser and redirect the visitor or give a warning message asking to enable JavaScript. There are two options here and one is to be selected. Without selection if the form is submitted the alert message will be displayed.

Here is the JavaScript code used between head tags of the html page


<script type="text/javascript"> 
function validate(form) { 
// Checking if at least one period button is selected. Or not. 

if (!document.form1.sex[0].checked && !document.form1.sex[1].checked){ 

alert("Please Select Sex"); 
return false;}

alert ("The period button validation is completed")
return true;
}
</script>

Here is the code of the period buttons with two options


<table border='0' width='50%' cellspacing='0' cellpadding='0' ><form name=form1 method=post action=action_page.php onsubmit='return validate(this)'>



<tr bgcolor='#ffffff'><td align=center  ><font face='verdana' size='2'><b>Sex</b><input type=radio name=sex value='male'>Male </font><input type=radio name=sex value='female'><font face='verdana' size='2'>Female</font></td></tr>


<tr bgcolor='#ffffff'><td align=center  ><input type=submit value=Submit> <input type=reset value=Reset></td></tr>


</table></form>

Subscribe to our YouTube Channel here

This article is written by plus2net.com team.

plus2net.com