Web Hosting by Netfirms | Free Domain Names by Netfirms

Checking if a radio button is selected in a group

If you know html it is easy to make a radio button but what do you do if you want to ensure at less one radio button is selected? You do it by checking the "checked" property of each radio button in the radio button group array. If one of the items in the array is checked it means the user selected one otherwise they didn't.

Because radio buttons are good form objects to get one chose from a list of predefined options the following example will use two radio buttons "yes" and "no" to get a yes or no answer from the user. The user is presented with the question "Do you want to be informed about updates?" The user must choose one option before the (imaginary) from is sent to the web server. After the user choices an option they are supposed to click on the send button that starts the checking process. If the user did not choose an answer they are informed that they must choose "yes" or "no" otherwise the form is sent. Run Code | View Code

Process

Ensure the "yes" or "no" radio button is selected - Checking the "checked" property of each radio button in the radio button group array
If no option is selected inform the user - alert("You did not choose an option")
If an answer is selected send the imaginary form
Function - checkRadio

Events

The user pressing the send button - onClick event of the button

Input

The radio button group - the value "group1" set on the "name" property of the "yes" and "no" radio buttons

Event Trigger

The onClick event of the send button will call the checkRadio function

The Solution

Define the button

Define the button in the body of the document <input type="button"> Set the message on the button's face. <input type="button" value="Send"> Register the button's "onClick" event <input type="button" value="Send" onclick=" "> Make the button's "onClick" event call the makeWindow() function <input type="button" value="Send" onclick= "checkRadio()">

Define the Yes and No radio buttons

Define two input tags and set their type to radio and give them the "yes" and "no" description. <input type="radio">Yes <input type="radio">No Insert both radio buttons into a logical group (group1). <input type="radio" name="group1">Yes <input type="radio" name="group1">No

Define checkRadio

Function analyses

The checkRadio function's purpose is to ensure a radio button is selected before sending the form.

This function first declares two local variables "radioReference" and "aRadioButtonIsSelected" then it sets "aRadioButtonIsSelected" to false and "radioReference" to the "group1" object defined in "myForm" which is in the document.

After declaring variables a "for" loop is defined. This loop's purpose is to iterate through every radio button in group1 and try and find a radio button in that group that is checked.

This loop iterates until it finds a checked radio button otherwise it iterates up to the last radio button in the group (in this case twice). The first statement within the loop if(radioReference[i].checked) tests if the radio button is checked. It does that by getting the current radio button from the radio button array and checking it's checked property. The checked property will return "true" or "false" to the if condition. If "true" is returned it means the current radio button in the array is checked so "aRadioButtonIsSelected" is set to "true" and the loop is terminated with the break statement. If "false" was returned (it means the current radio button is not checked) the loop continues and tries to find a radio button that is checked.

Finally the condition if(aRadioButtonIsSelected) is evaluated. This condition tests if "aRadioButtonIsSelected" is "true" if it is, it means one of the radio buttons were checked (which is the desired state) and the alert method is used and is passed the message "Going to send imaginary form". Otherwise all radio buttons were scanned and not even one of them was checked (since "aRadioButtonIsSelected" was never set to "true".) if this is the case an "alert" is used to inform the user that they must choose "yes" or "no".

Comments with code

function checkRadio(){

Define local variables var radioReference var aRadioButtonIsSelected The loop will set aRadioButtonIsSelected to true if a radio button is checked, so it's initialized with false. This allows the statement if(aRadioButtonIsSelected) to be evaluated with the real answer. aRadioButtonIsSelected = false Get the reference to group1 in myForm radioReference = document.myForm.group1 Iterate up to the last radio button but cancel the loop if one is checked for(var i=0; i<=radioReference.length-1; i++){

Is the radio button checked? if(radioReference[i].checked) {

Set aRadioButtonIsSelected to true aRadioButtonIsSelected = true Cancel the loop break

}

} is aRadioButtonIsSelected true ? if(aRadioButtonIsSelected){

Show the alert method alert("Going to send the form")

}else{

Show the alert method alert("You did not choose an option")

}

Radio button access

When you give a radio button a name (at design time) an array object is created and it adds the radio button to it. It doesn't just add that radio button but all radio buttons with the same name. This array is given the name used to define the radio button. In the above example two radio buttons are created and both are given the name "group1". "group1" is transformed into a array and the "yes" and "no" radio buttons are added to it in the order they were found, from top to bottom, so "yes" gets added first and "no" gets added second. This array can then be used just like any other array. In other words the array holds a group of radio buttons with the same name and is named with the same name the radio buttons were named. You may access any radio button in the array after the document has loaded.

Run Code | View Code

JavaScript Tutorial Home