The this Keyword and Forms
The previous example's function acted as a generic function, able to complete the same task with different form element groups because of the argument it employs. That argument allowed 2 radio groups to be used interchangeably within the function's statements. The this keyword is based on that very concept, while also providing a shorthand way of referencing forms, their elements and element properties.

Here are the basic rules govorning the use of the this keyword within a form:

• keyword "this" is referenced from inside a form or form element tag
• when used as "this.form", is a reference to the document object path to the form containing it, replacing the "document.formname" reference
• when used alone, is a reference to the document object path to the form element containing it, replacing the "document.formname.elementname" reference
• any property that would otherwise be appended to the document object path reference may also be appended to it

<form name="frogs" onsubmit="alert(this.name);return false">

<input type="checkbox" name="myCheck" onClick="alert(this.checked)">

<input type="radio" name="toads" onClick="alert(this.name)">

<input type="text" name="myText" value="Ribbit!">

<input type="radio" name="myFormText" onClick="alert(this.form.myText.value)">

<input type="submit">

</form>

The this keyword becomes especially useful when referencing forms contained in layers, which we will discuss later.

View the Source