How to read values in a form - Radio Buttons

The code for reading and setting radio buttons is slightly more complicated
than for text fields and checkboxes. Because all the radio buttons in a group
have the same name, you can’t just ask about the settings for a radio button
with a certain name—JavaScript won’t know which button you mean.
To overcome this difficulty, JavaScript puts all of the radio buttons with
the same name in a list. Each radio button in the list is given a number. The
first radio button in the group is number 0, the second is 1, the third is 2, and
so on. (Most programming languages start counting from 0—you just have
to get used to this.)
To refer to a radio button, use the notation radio_button_name[item_number].
For example, if you have four radio buttons named age, the first one will be
age[0], the second will be age[1], the third age[2], and the fourth age[3].
To see whether a visitor has chosen a certain radio button, look at its
checked property, just as with checkboxes. Let’s say you have four radio buttons
named age in a form called radio_button_form.To test whether
your visitor has selected the first radio button in the age group, write something
like this:

if (window.document.radio_button_form.age[0].checked == true)
{
alert("the first radio button was selected!");
}

This is much the same method that you would use for a checkbox. The only difference is that you must refer to the first radio button in the age group as age[0], whereas with a checkbox you can just give its name. Once you know how to determine whether a radio button is checked, it’s easy to understand how to select a radio button with JavaScript. With checkboxes, you use something like this:

window.document.form_name.checkbox_name.checked = true;

<b>Pull-Down Menus and Scrollable Lists<#60/b>

JavaScript can read and set pull-down menus and scrollable lists as it does radio buttons, with two main differences. First, while radio buttons have a checked property, pull-down menus and scrollable lists have a comparable property called selected. Second, the list that keeps track of the options in a pull-down menu or scrollable list differs from that for a radio button. As discussed in the section on reading and setting radio buttons, when a browser sees a group of radio buttons, it creates a list with the same name as the set
of radio buttons.
In contrast, a pull-down menu or scrollable list has the options property,
a list of all the options in the pull-down or scrollable list, which can tell you
what’s selected in that menu or list.

Small Example:

<form name = "my_form">
<select name = "the_gender">
<option value = "male">Male</option>
<option value = "female">Female</option>
</select>
</form>

The javascript function for this is:

if (window.document.my_form.the_gender.options[0].selected == true)
{
alert("It's a boy!)";
}

You can also select an option:

window.document.my_form.the_gender.options[1].selected = true;

Executing this line of JavaScript would select the female option in the pulldown
menu. Sometimes you have a long list of options in a pull-down menu, you just want to know which one the visitor has selected. Happily, pulldown menus and scrollable lists have a value property that contains value of the selected option.out quickly whether a visitor chose male or female in this pull-down menu,write something like this:

var chosen_gender = window.document.my_form.the_gender.value;