Validating Radio Buttons
So you want to put radio buttons on a form on your page but don't know how to go about validating that one has been selected or determining which one has been selected.
Well here we have a form containing three radio buttons to show you how to do it.
The code to make this form follows. Note that the highlighted parts of this code will be referenced within the validation javascript, you can call them what you like but you must name fields consistently (ie. all fields shown highlighted here and in the javascript with the same name must still all have the same name if you rename them.
<form name="myform">
<input type="radio" value="1st value" name="myradiobutton" />1st<br />
<input type="radio" value="2nd value" name="myradiobutton" />2nd<br />
<input type="radio" value="3rd value" name="myradiobutton" />3rd<br /> <br />
<input type="submit" name="submitit" onclick="valbutton(myform);return false;" value="Validate" />
<input type="reset" name="reset" value="Clear" />
</form>
The javascript that this form uses to validate that a radio button has been selected follows. An alert advising that you must select a button will display if no button is selected. When a button is selected, the value of the myOption field will contain the number of the button selected. Note that the buttons are numbered starting from zero. In this instance for the purpose of illustration, we simply display an alert advising which button was selected (shown in italics).
function valbutton(thisform) {
// place any other field validations that you require here
// validate myradiobuttons
myOption = -1;
for (i=thisform.myradiobutton.length-1; i > -1; i--) {
if (thisform.myradiobutton[i].checked) {
myOption = i; i = -1;
}
}
if (myOption == -1) {
alert("You must select a radio button");
return false;
}
alert("You selected button number " + myOption
+ " which has a value of "
+ thisform.myradiobutton[myOption].value);
// place any other field validations that you require here
thisform.submit(); // this line submits the form after validation
}
It should be a relatively simple matter for you to take the above form field definitions and javascript and incorporate it into your form. Note that the javascript does not require amending to handle as many radio buttons within the same group as you require, you simply assign them all the same name within the form.
