Element Types

Netscape Navigator version 3.0 and up enables you to retrieve a given element’s type. Each and every form element (button, radio, text area, etc.) features a type property which reflects the type of that form element. As usual in JavaScript syntax, the type property follows the element reference. For example, you can access the type of the first element of the first form in the following fashion:

document.forms[0].elements[0].type

Table 22-1 lists the various form elements with their corresponding types:

All values listed in the right column are plain strings representing the element type.

Using this with Event Handlers

When you call a function via an event handler you may refer to the form element which triggered the event handler, such as a text object or a button. The following script segment demonstrates this concept:

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

function process() {
  document.forms[0].elements[0].value = "thank you"
}
// -->
</SCRIPT>
<FORM>
<INPUT TYPE="text" NAME="myField"
VALUE="email..." onChange="process()">
</FORM>

At this point, it is not so important to understand what exactly this script does. The INPUT TYPE="text" definition creates a simple text box in which the user can enter a value. The text box (or text object) is assigned the string "email..." as its default value (the form comes up with this text inside the box). The onChange event handler captures a change event which occurs when the user changes the value of the text object and clicks outside of it. When such an event occurs, the function process is invoked and assigns the string "thank you" to that text object’s value property. Notice that a full object path specification, from the document browser object downwards, is used to access the text object. Such referencing has two disadvantages:

• The path is fairly long and complex.
• If you change the position or the name of either a form or an element, the path must be modified to reflect this change, making the maintenance very difficult.

The answer to this problem is using the keyword this to refer to the “current” object. For example, you can simplify the preceding code by implementing the this reference in the following way:

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

function process(callingElement) {
  callingElement.value = "thank you"
}

// -->
</SCRIPT>
<FORM>
<INPUT TYPE="text" NAME="myField"
VALUE="email..." onChange= "process (this)">
</FORM>

Using the above scheme, you can change the element’s position, name, or any other optional attribute (other than the event handler) and the script will still work without any modifications. The keyword this refers to the element providing the event handler. In this case, the value of this is equal to document.forms[0].elements[0]. When the function process is called, the value assigned to the callingElement parameter is this, so callingElement.value is equivalent to document.forms[0].elements[0].value.

The keyword this within an event handler script refers to the form element which the event handler belongs to. For example, the keyword this in an event handler that belongs to the first element of the first form in a document can be safely replaced by document.form[0].element[0].

Using the object this is very convenient when you use a single function to refer to different form elements.

You can also use this in an event handler script for purposes other than a function’s argument. You can also hand any property of the this object to a function, as demonstrated by the following script segment:

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

function display(str) {
  alert(str)
}

// -->
</SCRIPT>
<FORM>
<INPUT TYPE="text" NAME="myField1"
VALUE="d" onChange="display(this.value)">
<INPUT TYPE="text" NAME="myField2"
VALUE="f" onChange="display(this.value)">
</FORM>

---

Note:  Object, property, and method references can be passed as function arguments. Just like assigning any other value, they can be assigned to a variable as well. For example, you can use the following script segment instead of a window.document.write statement:

---

var obj = window.document
obj.write("Cool<BR>")

Be careful not to enclose an object reference by quotation marks—it is not a string.

Until now, the special object this was used as a substitute for a form element’s full path. JavaScript also allows you to reference a form from an element’s event handler script via the form property of this object. The previous source can be rewritten in the following form:

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

function process(callingElement) {
  callingElement.elements[0].value = "thank you"
}

// -->
</SCRIPT>
<FORM>
<INPUT TYPE="text" NAME="myField"
VALUE="email..."
onChange="process(this.form)">
</FORM>

The object representing the form is equivalent to document.forms[0].

Generally speaking, every form element includes a form property which enables a reverse access; that is, ability to reach the form from its element (although the element is really the form’s property). Therefore, you can use any one of the following expressions to access the first element of the first form in a given document:

document.forms[0].elements[0]
document.forms[0].elements[0].form.elements[0]
document.forms[0].elements[0].form.elements[0].form.elements[0]

You will probably never use this property independently in a script, because you can always refer to a form directly as a property of a window’s document object. However, such a reference is used a lot with forms, because an event handler’s script references the event handler as this, and the form property enables you to reference the form through a back door.

---

Note:  Microsoft Internet Explorer 3.0 does not properly support the use of this in all form element event handlers. Double-check every script that uses this object.

---

In addition to event handlers associated with form elements, you can also use this with event handlers of the <FORM> tag. In this case, this represents the object encompassing the entire form (such as document.forms[0]). Suppose you want to call a function from an onSubmit event handler. You can use the following outline to hand an object reference representing the form object to the function:

<FORM ... onSubmit="functionName(this)">

In this case, the expression this.form has no logical meaning.