Utilizing the form Property

In this chapter we discuss the various objects reflecting HTML form elements. Each form element is a direct property of the form to which it belongs. Take a look at the following example:

<FORM NAME="myForm">
<INPUT TYPE="text" NAME="myField" SIZE=10>
<!-- discussed later -->
</FORM>

In this simple example, the text object may be referenced as document.myForm.myField. This top-to-bottom hierarchy enables you to access any form element object if you already have an access to the form object itself. However, you may encounter a situation in which you pass a form element object to a function, for instance, and you want to reference the form object through a back door. JavaScript enables you to do so with the form property. For example, suppose you have a variable myField which holds a form element object. (For now, simply ignore how the object was assigned to the variable.) Assume the variable is named objRef and the object reference was explicitly assigned to it by the following statement:

var objRef = document.myForm.myField

Bear in mind that you do not have this statement in the script—all you have is the variable objRef, and you are attempting to reference the form object, myForm. You can use the form property to do so:

var formObjRef = objRef.form

form is a property of every form element object, with no exceptions. It is very convenient to invoke a function from an event handler with this as an argument. For example, consider the following script segment:

<SCRIPT LANGUAGE="JavaScript">
<!--

function getValue(otherElement) {
  alert(otherElement.form.elements[1].value)
}

// -->
</SCRIPT>
<FORM>
<INPUT TYPE="button" VALUE="click me"
onClick="getValue(this)">
<INPUT TYPE="text" VALUE="Bill Clinton" SIZE=10>
</FORM>

The first text object (form element) invokes the getValue function with this object as the argument. The function is designed to print the value of the second element, elements[1]. The only relation between the value handed to the function (the object representing the first form element) and the second form element is that they are both “children” of the same “parent.” The function accepts the object reflecting the first element, so it must access the second element through the common parent, the form object. Therefore, the correct syntax must include the form property (which is an object as well):

firstElement.form.secondElement

The form property acts like a connector in this case. If you implement a function that references various elements of a form, you may want to initially use this.form as the function’s argument. You should then use the following code in place of the preceding script segment:

<SCRIPT LANGUAGE="JavaScript">
<!--

function getValue(form) {
 alert(form.elements[1].value)
}

// -->
</SCRIPT>
<FORM>
<INPUT TYPE="button" VALUE="click me"
onClick="getValue(this.form)">
<INPUT TYPE="text" VALUE="Bill Clinton" SIZE=10>
</FORM>

Figure 22-4.  A simple text box with an initial (default) value.

Text Object

HTML Syntax

A text object is defined by the following plain HTML syntax:

<INPUT
 TYPE="text"
 NAME="textName"
 [VALUE="contents"]
 [SIZE="integer"]
 [MAXLENGTH="integer"]
 [onBlur="handlerStatement"]
 [onChange="handlerStatement"]
 [onFocus="handlerStatement"]
 [onSelect="handlerStatement"]>

The NAME attribute enables you to assign this HTML object a name which identifies it in both server-side queries and JavaScript scripts. The VALUE attribute accepts the initial string that should appear in the box when the page loads. Not only is this string the initial one in the text box, it is also the default string. When you reset the form via a Reset button or the reset() method, this string reappears in the text box. The SIZE attribute is essential because it determines the size (in characters) of the text box. The MAXLENGTH attribute specifies the maximum input length allowed in this field. If the user enters a string that is longer than MAXLENGTH, only the first MAXLENGTH characters are entered. This option is especially handy when requesting a specific string, such as a password, which is naturally limited to a given length. The following script segment demonstrates the use of the text object in an HTML document:

Processor: <INPUT TYPE="text" NAME="comp" SIZE=15 MAXLENGTH=20
VALUE="Pentium Pro">

If implemented correctly within <FORM>…</FORM> tags, this text box should appear as follows:

Notice that a text object can hold a maximum of one line. You can use a textarea object to display multiple lines.

JavaScript Access

There are basically four ways to access a text object via JavaScript:

[window.]document.formName.textName
[window.]document.formName.elements[index]
[window.]document.forms[index].textName
[window.]document.forms[index].elements[index]

You already know that a form can be accessed through its name or via the forms object when the form’s index is known. Similarly, you can access a form’s element by its name or through the elements array if the element’s index is known.

The preceding expressions show how to access a text object by itself. Usually, you will not access the text object, but rather its properties, methods, or event handlers.

Event Handlers

The text object is a very convenient means for both input and output. A text object has a wealth of event handlers you can use.

onBlur

A blur event occurs when a text field loses focus. A field gains focus when the user clicks inside the text box, and the focus is lost when the user clicks outside the box, anywhere on the page. The onBlur event handler executes JavaScript code when a blur event occurs. Take a look at the following form and function:

<SCRIPT LANGUAGE="JavaScript">
<!--

function checkInput(element) {
  if (element.value == "")
 alert("Please enter a value!")
}

// -->
</SCRIPT>
<FORM>
<INPUT TYPE="text" NAME="myField"
VALUE="" onBlur="checkInput(this)">
</FORM>

An alert dialog box informs the user that he or she must enter a value in the text box if the box is left empty. The dialog box is displayed only if the user first accesses the field and then exits it without entering any value.

onChange

A change event occurs when a blur event occurs and the value of the text object has been modified. The onChange event handler, also defined as an HTML tag attribute, executes JavaScript code when a change event occurs.

The onChange event handler is probably the most commonly used among other event handlers related with the text object (box or field). You can use this event handler when validating data entered by the user. That is, when the user modifies the text box content, a function is invoked to validate the changes. Validation via JavaScript instead of CGI or LiveWire saves precious network transmission time.

In order to demonstrate the onBlur event handler, a simple form element and a corresponding function have been implemented. The problem with this example is that the value of the text box is validated whenever it loses focus. However, it is generally better to validate the form only after changes are made. Therefore, the onChange event handler is superior for such tasks. The previous example is much better in the following version:

<SCRIPT LANGUAGE="JavaScript">
<!--

function checkInput(element) {
  if (element.value == "")
 alert("Please enter a value!")
}

// -->
</SCRIPT>
<FORM>
<INPUT TYPE="text" NAME="myField1"
VALUE="" onChange="checkInput(this)">
</FORM>

The following dual rule is very important in order to fully understand this event handler:

• A blur event naturally takes place whenever a change event occurs.
• A change event takes place only when a blur event occurs and the value of the text object has been modified and gained focus.