Forms and Form Elements Part II

The Radio Object

1. When creating radio buttons, each group of buttons must have the same name.
2. The radio buttons basically become assigned to an array (numbering starting with 0 for the first button and counting up from there.
3. To determine how many radio buttons are in a group you would use the length property:

document.radioForm.groupName.length

1. To determine if a specific box has been highlighted, use the checked property:

document.radioForm.groupName[0].checked

1. In the following script each of the 3 stooges has their full name assigned to a value. When the user clicks on the button, a function is called which runs an if loop which checks the checked property of each button. Once it finds the checked property, the loop breaks and the value of i is left at the current value of the radio button array. The alert box then looks up the i th value property so that the full name can be displayed in the alert box.

Select your favorite Stooge:

Moe

Larry

Curly

The Select Object

1. In a selection menu, some properties belong to the entire SELECT box, others belong to individual items in the list.
2. To determine which item in the menu has been selected, you can use the value property of the SELECT object as follows:

document.selectForm.selectName.value

1. In the following script, the values of each item in the list are URLs which will take a user to those locations, invoked by the onChange event handler.

Choose a place to go:

Home Page

Shop Our Store

Shipping Policies

Prevalidating Form Information

1. This script uses the forms onSubmit event handler which fires when one clicks on the Submit button.
2. The function checks to make sure all fields are filled in. If any are not, the function reads return false which means the form will not be sent.

Please enter all requested information:

First Name:

Last Name:

Rank:

Serial Number:

Assignment 8

Create a page that includes a SELECT object to change the background color of the current page. The property that you need to set is document.bgColor, and the three values you should offer are red, yellow, and green. The menu items should read Stop, Caution, and Go. If you choose menu item Stop then the page should turn red, etc. Make sure to change all your variable names, form name, etc. to match what you are doing in your assignment.