1. Technology

Single Radio Buttons


A number of people have asked why the radio button validation script doesn't work when there is only one radio button. These people are usually dynamically generating their page content from a database and have situations where there is only one choice to display in their radio button group. Another question that gets asked occasionally is how to unset the selection in a radio button group so that none of the buttons are selected. These questions may appear to be unrelated but since they both relate to how radio buttons actually work most of the discussion of how to resolve the problem applies equally to both questions and so I will deal with them together.

Radio buttons get their name from the early style car radios that had a row of buttons that you preprogrammed to your selected radio stations. You simply pushed in the button for the radio station you wanted and the prior button popped back out (since obviously you can't listen to two radio stations on the same radio at the same time). Radio buttons on computer forms (whether in web pages or other programs) are designed to work the same way as those old style radios and hence have been named accordingly.

Now imagine one of those old style car radios that has only one button for selecting the station to listen to (not that any ever came that way, they usually had five or six such buttons). While that single button may not actually be selected when you first install the radio you can't use the radio until you push the button in to select the radio station. Also once you have pushed the button in there is then no way to get the button back out without forcing the mechanism and in any case there is no point in forcing the button back out since that will just stop the radio from functioning. Radio buttons in forms work similarly to this. While a single radio button may or may not be selected when the form is first displayed it is useless until it is selected and once selected it can not be easily unselected. Similarly if we have more than one radio button they are useless until one is selected and therefore no provision is made for unselecting all of the buttons after one is selected. You unselect one button in a group by selecting a different button in the group. If this isn't the functionality that you are looking for then radio buttons are not the right choice and you should consider other options such as checkboxes or a select list instead.

The Javascript radio button validation function provides one client side solution to the problem of ensuring that a radio button is selected from within the group. The other way of solving the same problem client side is to preselect one of the buttons when you first display the form. The difference between these two approaches is that when you preselect a button your visitor can submit the form without having to select a radio button as one is already selected for them. This will probably result in more forms being submitted with that value set rather than the alternative values which may not be what you want.

The two situations that this doesn't cover are those that we started with – how to handle a single radio button and how to deselect all of the buttons. Let's start with the second of these since it also provides some solutions that may resolve the first situation as well. The question that really needs to be asked is why you want to deselect all of the buttons. Remember that deselecting all of the buttons makes your radio button group invalid and I am fairly sure that this is not your intention so the only other reason that really makes sense is that you have a situation where none of the options apply. In this case the simplest solution is to just add another radio button to cover this situation and set that one when none of the other buttons apply. This will give you a way to unset all of the other buttons while still giving a meaningful value for the group. If you don't want the visitors to your page selecting this option themselves then hide this extra button either by changing the type from radio to hidden or better by setting the style for the button to display:none.

With only one radio button in a group there are two possibilities. Either that is the only value and it must be selected or the situation we have just discussed applies and we should have a second radio button or a hidden field in the group to cater for the situation where the one button doesn't apply. Another alternative in this case would be to substitute a checkbox for the radio button since that corresponds to the actual functionality required in that instance. Where there is genuinely only one option and that option must be chosen then there is nothing for your visitor to choose between and so a radio button becomes completely unnecessary. The simplest solution in this instance is to substitute a hidden field for the radio button when building the content of the page. With dynamically generated pages you simply need to cater for this in the server side code that is generating the page.

Appropriate selection of the correct form fields based on the functionality that you require should mean that you only ever use radio buttons when there are at least two buttons to choose between and where one of those buttons must be selected for the group to be valid. The only validation that is therefore required client side is to examine the array to check that one of the buttons is selected and the only validation required server side is that there was a value passed from the radio button group.

Related Video
Add Menu Buttons in iDVD
  1. About.com
  2. Technology
  3. JavaScript
  4. Problem Solving
  5. Single Radio Buttons and JavaScript Validation

©2014 About.com. All rights reserved.