October 10, 1999 - The Second-Radio-Button-Group Bug

Yehuda Shiran October 10, 1999
The "Second Radio Button Group" Bug
Tips: October 1999

Yehuda Shiran, Ph.D.
Doc JavaScript

If your Web page includes a form with radio buttons, you may encounter a Macintosh bug (Internet Explorer 4.x). Let's look at the following form definition:

<FORM NAME="demo">
  <INPUT TYPE="radio" NAME="firstGroup"> 1st group, 1st button<BR>
  <INPUT TYPE="radio" NAME="firstGroup"> 1st group, 2nd button<BR>
  <INPUT TYPE="radio" NAME="firstGroup"> 1st group, 3rd button<BR>
  <INPUT TYPE="radio" NAME="secondGroup"> 2nd group, 1st button<BR>
  <INPUT TYPE="radio" NAME="secondGroup"> 2nd group, 2nd button
</FORM>

Here's the output of this code segment:

1st group, 1st button
1st group, 2nd button
1st group, 3rd button
2nd group, 1st button
2nd group, 2nd button
A radio button is accessible in JavaScript via its group name and its index within the group. For example, the third button of the 1st group is:

document.demo.firstGroup[2]

and the first button of the second group is:

document.demo.secondGroup[0]

but the Macintosh version of Internet Explorer produces an error when trying to interpret this reference.

The workaround for this bug is to use the form's elements array, which holds references to all of the form's elements. When referencing the second radio button group, you need to count how many form elements belong to the first group. In the above example, we have three form elements in the first radio button group. Therefore, the first button of the second group should be accessed as:

document.demo.elements[3]

This technique is used in our Window Builder and Menu Builder tools.