Attribute for <INPUT ...>
onChange = "script command(s)"

onChange specifies script code to run when the data in the input field changes. onChange applies to input fields which accept text, namely text and password fields. (<TEXTAREA ...> and <SELECT ...> fields also use onChange.)

The onChange event is triggered when the contents of the field changes. For example, when the user enters an email address in this form, a script does some basic validity checking on the value entered:

<SCRIPT TYPE="text/javascript">
<!-- 
function checkEmail(email)
{
if(email.length > 0)
   {
   if (email.indexOf(' ') >= 0)
      alert("email addresses cannot have spaces in them");
   else if (email.indexOf('@') == -1)
      alert("a valid email address must have an @ in it");
   }
}
//-->
</SCRIPT>


<FORM ACTION="../cgi-bin/mycgi.pl" METHOD=POST>
name:        <INPUT NAME="realname"><BR>
email:       <INPUT NAME="email" onChange="checkEmail(this.value)"><BR>
destination: <INPUT NAME="desination">
</FORM>

which gives us this form:

name:
email:
destination:

Because onChange only occurs when the value changes, the user is only warned once about a bad value. That's generally the most desirable way to do error checking. Even if the value is wrong, most users prefer to be warned just once.

The onChange happens whenever anything changes the value of the field, not just when the user enters a value. If a field's onChange changes the value of the field, it's easy to get an endless loop. In situations like this, be sure to check if the change needs to happen. For example, this product order form makes sure that the "total" field is always the correct total (even if the user changes it). The subtotal field "vn_stVis" uses onChange to check if it is different than the hidden subtotal field "vn_stHold". If there is a difference, vn_stVis is reset, which then causes another onChange event. However, that second time around the two fields are the same, and the script ends.

<SCRIPT TYPE="text/javascript">
<!-- 
function orderTotal(oform, prefix)
{
// set references to fields
var qty = oform[prefix + "_qty"];
var stHold = oform[prefix + "_stHold"];
var price = oform[prefix + "_price"];
var stVis = oform[prefix + "_stVis"];

// only bother if the field has contents
if (qty == "")return;

// if the with is not a number (NaN)
// or is zero or less
// everything goes blank
if(isNaN(qty.value) || (qty.value <= 0))
   {
   qty.value = "";
   stHold.value = "";
   }
   
// else the field is a valid number, so calculate the 
// total order cost and put that value in the 
// hidden subtotal field
else
   stHold.value = (Math.round(qty.value * price.value * 100))/100;

// call the routine which checks if the 
// visible subtotal is correct
visTotal(oform, prefix);
}

// checks if the visible subtotal is correct
// ie, if it equals the hidden subtotal field
function visTotal(oform, prefix)
{
var stHold = oform[prefix + "_stHold"];
var stVis = oform[prefix + "_stVis"];

if (stVis.value != stHold.value)
   stVis.value = stHold.value;
}
// -->
</SCRIPT>

<FORM ACTION="../cgi-bin/mycgi.pl">
<TABLE BORDER CELLPADDING=3>
<!-- table titles -->
<TR BGCOLOR="#99CCFF">
   <TH>item</TD>
   <TH>quantity</TD>
   <TH>price</TD>
   <TH>total</TD>
   </TR>

<!-- v-neck sweater -->
<TR BGCOLOR="#FFFFCC">
   <TD>v-neck sweater</TD>
   <TD><INPUT 
         TYPE=TEXT 
         NAME="vn_qty" 
         SIZE=3 
         onChange="orderTotal(this.form, 'vn')" 
         ></TD>
   <TD><INPUT TYPE=HIDDEN NAME="vn_price" VALUE="33.95">$33.95</TD>
   <TD ALIGN=RIGHT>
      <INPUT TYPE=HIDDEN NAME="vn_stHold">
      <INPUT 
         TYPE=TEXT 
         NAME="vn_stVis" 
         SIZE=10 
         onChange="visTotal(this.form, 'vn')" 
         ></TD>
   </TR>

<!-- JoAnn style blazer -->
<TR BGCOLOR="#FFFFCC">
   <TD>JoAnn style blazer</TD>
   <TD><INPUT 
         TYPE=TEXT 
         NAME="ja_qty" 
         SIZE=3 
         onChange="orderTotal(this.form, 'ja')" 
         ></TD>
   <TD><INPUT TYPE=HIDDEN NAME="ja_price" VALUE="99.95">$99.95</TD>
   <TD ALIGN=RIGHT>
      <INPUT TYPE=HIDDEN NAME="ja_stHold">
      <INPUT 
         TYPE=TEXT 
         NAME="ja_stVis" 
         SIZE=10 
         onChange="visTotal(this.form, 'ja')" 
         ></TD>
   </TR>

</TABLE>

<P><INPUT TYPE=SUBMIT VALUE="submit">
</FORM>

which gives us this form:

item	quantity	price	total
v-neck sweater		$33.95
JoAnn style blazer		$99.95