Home >> Forms >> <INPUT ...>

<INPUT onClick="...">

<INPUT onFocus="...">

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

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:

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:

<INPUT onClick="...">

<INPUT onFocus="...">