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

function process1() {
  document.forms[0].elements[0].value = "thank you";
}

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

We can implement the same effect with the this keyword. Convince yourself that the effect is the same:

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

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

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

This form is preferred because 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 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 callingParameter.value is equivalent to document.forms[0].elements[0].value.

People who read this tip also read these tips:

• Is That Really an Email Address?
• Implementing Read-Only Fields
• Blocking the Right Mouse Button
• Detecting a Modifier Key
• Form Cancellation