Gathering Data with Forms in JavaScript

JavaScript form object

The first form in a document can be referred to as document.form1 ("form1" is the value of the NAME attribute of the form) or document.form[0].

Form object properties

1. action - program to which for data will be submitted
2. encoding - form MIME type (specified with the ENCTYPE attribute)
3. length - number of form elements
4. method - GET or POST
5. target - window in which result of form (from the CGI script) will be displayed

Submitting & resetting forms

Use submit and reset buttons.

Detecting form events

There are two event handlers.

• onSubmit
• onReset

Scripting form elements

Both of the statements below refer to the first element called name1 on the form called order.

document.order.elements[0]
document.order.name1

Text fields

INPUT TYPE="text" NAME="text1" VALUE="hello" SIZE="30"

JavaScript treats the INPUT TYPE shown above as a text object named text1.

document.order.username.value = 'Joe Soap'

The code above sets the text field username to Joe Soap.

Text field methods

• focus() positions the cursor into a field
• blur() removes the focus from a field
• select() selects all the text in a field

Text field events

• onFocus occurs when a text field gains the focus
• onBlur occurs when a text field loses focus
• onChange occurs when the text is changed and the focus is moved off a field
• onSelect occurs when some or all of the text in a field is selected. This event does not occur on execution of the select() method

Buttons

INPUT TYPE="submit" NAME="sub1" VALUE="Click here"

• INPUT TYPE="submit" causes data in form fields to be sent to a CGI script
• INPUT TYPE="cancel" sets all form fields back to their default values
• INPUT TYPE="button" performs no action by itself. A JavaScript event handler can be assigned to it

The onClick event handler is commonly used with buttons.

Check boxes

INPUT TYPE="checkbox" NAME="check1" VALUE="yes" CHECKED>
document.order.check1.checked=true

Radio buttons

INPUT TYPE="radio" NAME="radio1" VALUE="Option1" CHECKED> Option 1
INPUT TYPE="radio" NAME="radio1" VALUE="Option2"> Option 2
INPUT TYPE="radio" NAME="radio1" VALUE="Option3"> Option 3

Drop-down lists

SELECT NAME=="select1" SIZE=40>
OPTION VALUE="choice1" SELECTED> First choice
OPTION VALUE="choice2"> Second choice
OPTION VALUE="choice3"> Third choice

Drop-down list properties

• name is name of selection list
• length is number of options in list
• options is an array of options. There is an entry for each selection
  • length indicates number of selections in the options array
    • index is the array index
    • defaultSelected shows the state of the selected attribute
    • selected is the current state of the option. Setting this property to true selects the option. You can select multiple options if the MULTIPLE attribute is included in the SELECT tag
    • name is the valure of the NAME attribute
    • text is the text that is displayed in the option
• selectedIndex returns the index value of the currently selected item. In a multiple selection list this indicates the first selected item

Drop-down list methods

• blur() removes the focus from a selected field
• focus() moves the focus to a selected field

Drop-down list events

• onFocus activated when field selected
• onBLur activated when field de-selected
• onChange when focus lost and field value changed

Reading the value of a select item is a two step process. First use the selectedIndex property to find the value of the selected choice.

ind = document.navform.choice.selectedIndex;
val = document.navform.choice.options[ind].value;