Setting Up and Validating Radio Buttons

Setting Up and Validating Radio Buttons The setup and validation of radio buttons appears to be the form field that gives many webmasters the most difficulty in setting up. In actual fact the setup of these fields is the most simple of all form fields to validate as radio buttons set one value that only needs to be tested when the form is submitted. The difficulty with radio buttons is that there are at least two and usually more fields that need to be placed on the form,  related together and tested as one group. Provided that you use the correct naming conventions and layout for your buttons, you will not have any trouble. Setup the Radio Button Group The first thing that to look at when using radio buttons on our form is how the buttons need to be coded in order for them to function properly as radio buttons. The desired behavior we want is to have only one button selected at a time; when one button is selected then any previously selected button will be automatically deselected. The solution here is to give all of the radio buttons within the group the same name but different values. Here is the code used for the  radio button themselves. input typeradio namegroup1 idr1 value1 /input typeradio namegroup1 idr2 value2 /input typeradio namegroup1 idr3 value3 / The creation of multiple groups of radio buttons for the one form is also straightforward. All you need to do is to provide the second group of radio buttons with a different name to that used for the first group. The name field determines which group that a particular button belongs to. The value that will be passed for a specific group when the form is submitted will be the value of the button within the group that is selected at the time that the form is submitted. Describe Each Button In order for the person filling out the form to understand  what each radio button in our group does, we need to provide descriptions for each button. The simplest way to do this is to provide a description as text immediately following the button. There are a couple of problems  with just using plain text, however: The text may be visually associated with the radio button, but it may not be clear to some who use screen readers, for example.  In most user interfaces using radio buttons, the text associated with the button is clickable and able to select its associated radio button. In our case here, the text will not work in this way unless the text is specifically associated with the button. Associating Text with a Radio Button To associate  the text with its corresponding radio button so that clicking on the text will select that button, we need to make a further addition to the code for each button by surrounding the entire button and its associated text within a label. Here is what the complete HTML for one of the buttons would look like: input typeradio namegroup1 idr1 value1 /label forr1 button one/label As the radio button with the id name referred to in the for parameter of the label tag is actually contained within the tag itself, the for and id parameters are redundant in some browsers. Their  browsers, however, are often not smart enough to recognize the nesting, so it is worth putting them in to maximize the number of browsers in which the  code will function. That completes the coding of the radio buttons themselves. The final step is to set up the radio button validation using JavaScript. Setup Radio Button Validation Validation of groups of radio buttons may not be obvious, but it is straightforward once you know how. The following function will validate that one of the radio buttons in a group has been selected: // Radio Button Validation// copyright Stephen Chapman, 15th Nov 2004,14th Sep 2005// you may copy this function but please keep the copyright notice with itfunction valButton(btn) {    var cnt -1;    for (var ibtn.length-1; i -1; i) {          if (btn[i].checked) {cnt i; i -1;}    }    if (cnt -1) return btn[cnt].value;    else return null;} To use the above function, call it from within your form validation routine and pass it the radio button group name.  It will return the value of the button within the group that is selected, or return a null value if no button in the group is selected. For example, here is  the code that will perform the radio button validation: var btn valButton(form.group1);if (btn null) alert(No radio button selected);else alert(Button value btn selected); This code was included into the function called by an onClick event attached to the validate (or submit) button on the form. A reference to the whole form was passed as a parameter into the function, which uses the form argument to refer to the complete form. To validate the radio button group with the name group1 we, therefore, pass form.group1 to the valButton function. All of the radio button groups that you will ever need can be handled using the steps covered above.