Working with Radio Buttons


Radio buttons provide a way to allow someone to make a single choice from a number of possibilities. For example a form might contain a block of radio buttons like these:


The instructor for this course was:

always very well prepared;
very well prepared;
adequately prepared;
poorly prepared;
very poorly prepared.


 

For this to work each radio button must have the same name. Radio buttons with the same name are treated as a group by the browser so that only one button may be checked at one time. Here is the HTML for this form - the radio button input tags are set in bold:

 

<HTML>
<HEAD>
<TITLE>Sample Form with Radio Buttons</TITLE>
</HEAD>
<BODY bgColor="#FFFFFF">
<form method="post" action="" name="instructorRating">
  <p>The instructor for this course was:</p>
  <blockquote>
    <p>
      <input type="radio" name="prep" value="excellent" checked>
      always very well prepared;<br>
      <input type="radio" name="prep" value="very good">
      very well prepared;<Br>
      <input type="radio" name="prep" value="neutral">
      adequately prepared;<Br>
      <input type="radio" name="prep" value="poor" >
      poorly prepared;<Br>
      <input type="radio" name="prep" value="very poor" >
      very poorly prepared.
    </p>
    <P><INPUT Type="Submit" Value="Rate Your Prof Now!"></P>
  </blockquote>
</form>
</BODY>
</HTML>

Since each radio button has the same name (in this case prep), we cannot find out the value of the selected tag by doing this:

myValue = document.instructorRating.prep.value //This does not work!

as there are many buttons named prep. To get around this problem, whenever a number of identically named input tags of the same type are used in a form, an array of references to the objects that reflect each identically named input tag are created. Arrays are described in detail on another page however, the following is a brief description of what they are and how to get information from them.

Arrays

An array is a special type of object that contains a sequence of storage elements. Each element is similar to a variable except that they it is accessed using the array name and its index number in the array rather than by its own name. Just as objects contain properties that can be accessed by the property name, arrays contain elements that can be accessed by their index number. Here is a simple example of creating and then accessing the elements of an array.

myArray = new Array(12, "hello", 1, 34)
myArray[0] = 44
document.writeln(myArray[1])

In this example an array is created named myArray that contains the number 12, the string hello, the number 1 and the number 34. The number 12 is the first element and is available via index number 0. The second statement in the example sets the first element (index number 0) to 44 instead of 12. The last statement writes out the value of the second element in the array: the string hello. An index into an array is always written in square brackets after the array name. For example:

x = myArray[3]

retrieves the fourth element from the array (at index 3) and copies the value in the fourth element in the the variable x. The array in this example contains four elements. The number of elements in an array is always available via the length property of the array. Again in this example

x = myArray.length

will result in x being assigned the value 4, as there are four elements numbered zero through three.

Arrays of Radio Buttons

When multiple input tags have the same name an object that reflects each tag is created. An Array with the same name as the tags is created that contains references to each input tag object. This arrangement is illustrated below:

In the example HTML page above, the value of the second radio button can be determined this way:

x = document.instructorRating.prep[1].value

instructorRating is the name of the form and prep is the name of the radio buttons. value is the property that holds the value of the radio button. In this case the value is the one set in the HTML form, the string: very good, so x will be assigned the string very good. Radio buttons have a property named checked that is true if the button is checked and false if it is not. To find out if the second element (number one) is checked we could do the following:

if (document.instructorRating.prep[1].checked){
   document.writeln("It was checked.")
}

of course we could also:

prep1 = document.instructorRating.prep[1]
if (prep1.checked){
   document.writeln("It was checked.")
}

In this case the variable prep1 has been assigned a reference to the radio button object. This does exactly what the previous statements did and in some cases can save a lot of typing. In either event, if the button is not checked - as in the illustration below - then the checked property of prep1 will be false.

In the illustration above document.instructorRating.prep[0].checked will be true and the checked property of all the other radio objects in the prep array will be false.

Which Button was Checked?

To determine which button was checked in a sequence the checked property of each radio button object in the sequence must be tested. Here is a loop that writes out the value of the radio button that was checked in an alert dialog box.

radioArray = document.instructorRating.prep


for (i=0; i < radioArray.length; i++){
   if (radioArray[i].checked){
      alert(radioArray[i]Value)
      break
   }
}

The first statement assigns a reference to the sequence of radio button objects named prep to a variable named radioArray. A for loop that begins at zero and ends at one less than the length of the array is used to examine the checked property of each radio button object. When one is found that is checked the value is displayed in the alert box and the break statement is used to break out of the loop. Code like this is normally found inside a function that is only called when an event occurs, such as the user pressing the submit button, well after the form has loaded and the objects that represent the form are created. Finally, here is an example where this form is only submitted if the instructor receives the highest rating for preparedness - the changes from the form above are in bold:

<HTML>
<HEAD>
<TITLE>Sample Form with Radio Buttons</TITLE>
<SCRIPT Language="JavaScript">
<!--
function reportValue(frm){

   var radioArray = frm.prep
   var i
   var value

   for (i=0; i < radioArray.length; i++){
      if (radioArray[i].checked){
         value = radioArray[i].value
         break
      }
   }

   if (value == "excellent")
      return true
   else{
      alert("Are you sure the instructor is " + value + "?\nYou may be underestimating the instructor!")
      return false
   }
}

//-->
</SCRIPT>
</HEAD>
<BODY bgColor="#FFFFFF">
<form method="post" action="" name="instructorRating" onSubmit="return reportValue(this)">
  <p>The instructor for this course was:</p>
  <blockquote>
    <p>
      <input type="radio" name="prep" value="excellent" checked>
      always very well prepared;<br>
      <input type="radio" name="prep" value="very good">
      very well prepared;<br>
      <input type="radio" name="prep" value="neutral">
      adequately prepared;<br>
      <input type="radio" name="prep" value="poor" >
      poorly prepared;<br>
      <input type="radio" name="prep" value="very poor" >
      very poorly prepared.</p>
<P><INPUT Type="Submit" Value="Rate Your Prof Now!">
  </blockquote>
</form>
</BODY>
</HTML>

 

It is also possible to set the checked property of a radio button object. Doing this will uncheck any radio button in the series that is already checked and check the corresponding button. For example:

document.instructorRating.prep[0].checked = true

has the same effect as the user clicking on the first radio button in the series.