JavaScript - Developing Interactive Forms
In a Nutshell - CIW Course Section 2, Part A2, Chapter 1
By now, of course, we should be familiar with HTML forms. Forms with JavaScript, are the same forms, JavaScript just provides a way to manipulate them. Form field objects have their own category within the JavaScript Object Hierarchy.
The course material informs us that all form element must be enclosed with the <FORM> </FORM> tags, which is only logical. Apparently, without these tags, the form elements will not display in Netscape Navigator. However, I tried this with Navigator 7.1 and they did display perfectly well. Section 1 TMA09 uses form elements without these tags.
Using JavaScript, forms can be created dynamically, but by far the most common use for JavaScript is to validate form input before submitting. More on this later.
Form Events
The event handlers for the Form Object are the events most likely to be used to trigger your JavaScript code to process the form data. There are only two event handlers for the form object: onReset and onSubmit. Hopefully, the function of these events is fairly self-explanatory.
Button Object
The Reset and Submit buttons will be familiar, as they appear on most forms. However, a form can include other buttons, with any function you require, and can provide the code for.
The only event associated with a button is the onClick event.
Checkbox Object
The checkbox is the tick box that the user can select or deselect. The checked property returns a Boolean value of true or false depending if the checkbox is selected or not.
The only event associated with a checkbox is the onClick event.
Text Object
The Text and Textarea objects allow the user to enter free text. The latter allowing multiple lines of text input. The value property will return the contents of the text or textarea object.
These text objects have three event handlers, which are detailed in the table below:
| Event Handlers for text and textarea Objects | |
|---|---|
| Event | Description |
| onBlur | Fires when the user moves the cursor out of the text box. |
| onFocus | Fires when the user moves the cursor into the text box. |
| onSelect | Fires when the user highlights the text in the text box. |
Radio Button Object
Radio buttons are used to allow a user to select one option from two or more selections. Radio buttons are grouped together by sharing the same NAME property value.
The only event associated with a radio button is the onClick event.
Select Object
The select object provides a list or drop-down list to allow the user to select one option or multiple options from a selection.
The select object shares the same event handlers as the text box, but also has the onChange event which occurs when the selected option changes from the default.
Form Validation
Validating a from is the process of ensuring that the user has entered meaningful data into the form fields before submitting it. This may be as simple as confirming that text fields contain some text, or may be more precise to check that an entered number is within a certain range. It is also common to test an entered date to verify that it is a valid date.
This can ease the burden on the server as client-side validation reduces the need for the server to further validate it after the form has been submitted.