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.
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