Working with Forms and Input Devices - JavaScript by Example - page 365

Figure 11.21 The user clicked the Reset Form button. The dialog box confirms the
choice before the input boxes are reset to their default values.

11.4.5 The this Keyword

The this keyword is especially helpful when dealing with forms. We used the this word
when working with objects as a reference to the current object. For forms containing
multiple objects, such as checkboxes, radio buttons, and textboxes, it is easier to refer
to the object with the this keyword than by using its full name when calling a function.
When using an event handler, the this keyword always refers to the object that trig-
gered the event. If the event is triggered from within the <form> tag, this refers to the
current form, but if it is triggered by an element within the form, such as an input device,
then it references that element. Each element has a form property that references the
form in which it was created. In the following segment of an HTML document, note that
when the onClick event handler is triggered within the first button input type, the form
property is used to reference the form itself, whereas in the second button, the this key-
word refers to the current button.

FORMAT

<form> <-- The JavaScript form object

<input type="button" <-- This a JavaScript element

value="Print Form Stuff"
onClick="display_formval(this.form);" /> <-- this keyword references the
form object by using the
element's form property

<input type="button"
value="Print Button Stuff"
onClick="display_buttonval(this) ;" />

<-- this keyword references the
current object, the button

</form>