Field Object Arrays

In the Javascript object hierarchy...

• Beneath the document object is the form object. Individual forms can be referenced:
  • by name
  • as elements of an array
• Beneath the form object is the element (field) object. Individual fields can be referenced:
  • by name
  • as elements of an array
• ...and so on down the hierarchy.

Here's Web Cellar's wine selection form. It alerts if the user selects an expensive wine. Peruse the source code and observe:

• the Form.elements array
• the checkbox form element
• the properties of the Form Object are:
  • action
  • elements
  • encoding
  • length
  • method
  • name
  • target

Lab

Your task:

• Copy the example form and edit it as follows.
• Add a CHECK ALL checkbox that checks all the checkboxes.
• To check a checkbox, set its checked property to true.
• The trick is to loop through the array of form fields with a loop such as:

  for ( i=0; i<len; i++)

  where len is the length property of the array of form elements.

Solution

Don't peek unless you're stuck!

• Run it.
• Source code.

Extra for Experts

• Add code that unchecks all the checkboxes if the user unchecks the ALL OF THE ABOVE checkbox.
• Generalize the test for expensive wine: instead of "hardwiring" the test to the 4th item in the list, test the price whenever any checkbox is checked and alert if it's over $50.00.
• Test and alert for expensive wines when the ALL OF THE ABOVE checkbox is checked.
• Solution