Buttons and select lists

There are three types of buttons:

• button (ordinary button; not submit or reset)
• submit a form
• reset a form

Submit and reset buttons must be in a form container element. The other ordinary buttons may, or may not, be within a form container element.

There are alternate ways to build a button:

• Ordinary button
  • button element type="button"
  • input element type="button"
• Button to submit a form
  • button element type="submit"
  • input element type="submit"
• Button to reset a form
  • button element type="reset"
  • input element type="reset"

The first sample shows input elements, which are buttons.
The second sample shows the same thing, using button elements.
There is no JavaScript for these buttons, so submit and reset work, but the ordinary button does nothing.

An ordinary button is processed by the onclick attribute of the button.

A submit button is processed by the onsubmit attribute of the form.
Note that the onsubmit attribute is in the form element, not in the button element.

A reset button could be processed by the onreset attribute of the form, but seldom is processed.

Submit and reset buttons must be in a form container element. Other ordinary buttons may, or may not, be within a form container element.

By default, select lists allow selection of only one option.

In the Document Object Model, the Select object has properties:

• options[] - contains an array of references to all the options
• selectedIndex - contains the index in the options[] array, of the option that is selected

Sample 4 shows processing of a single selection in a select list.

If you provide the attribute multiple="multiple" in the select element, the select list allows selection of multiple options.

In this case, you will need to search the options[] array to see which select objects have their selected property set to true.

Sample 5 shows processing of multiple selections in a select list.

We have seen that buttons can be built using the input or button elements. We have seen three types of buttons: button, submit, and reset.

Ordinary buttons are processed onclick. Submit and reset buttons are processed by the onsubmit and onreset attributes of the form.

We have seen single selection and multiple selection select lists. The select object has a property: options, which is a read-only array of all the options in the select list. For a single selection, the index in the array is given by the select object's property selectedIndex. For a multiple selection, you must look at all of the options, to see which have their selected option set to true.

Reading assignments are in the text book, Java Script, A Beginner's Guide, Second Edition, by John Pollock; McGraw Hill / Osborne, ISBN 0-07-222790-7

There are no additional reading assignments.

Do NOT read the lecture notes before hearing the lecture. If you do, you will find the lecture very boring. Read the lecture notes if you do not attend the lecture, or if you wish to review the material.