August 7, 2000 - Back-Door Referencing of the Form Object | WebReference

August 7, 2000 - Back-Door Referencing of the Form Object

Yehuda Shiran August 7, 2000
Back-Door Referencing of the Form Object
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

You can use the special object this in event handler, 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. Here is a text field that turns into "thank you" once you change its "email..." string (click outside the field to signal the change's end):

Here is the script that implements this field:

<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 property this.form is equal to document.forms[0], so callingElement.elements[0].value is equal to the full path: document.forms[0].elements[0].value.

Every form element includes a form property which enables a reverse access; that is, ability to reach the form from its elements (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 the 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.