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

onClick gives the script to run when the user clicks on the input. onClick applies to buttons (submit, reset, and button), checkboxes, radio buttons, and form upload buttons.

onClick is mostly used with plain button type inputs:

<FORM>
<TABLE BORDER CELLPADDING=3>
<TR>
<TD><NOBR>radius: <INPUT NAME="Circle_radius" SIZE=4></NOBR></TD>
<TD><INPUT TYPE=BUTTON OnClick="Circle_calc(this.form);" VALUE="calculate"></TD>
<TD ALIGN=RIGHT BGCOLOR="#AACCFF">
<NOBR>circumference: <INPUT NAME="Circle_circumference" SIZE=9></NOBR><BR>
<NOBR>area: <INPUT NAME="Circle_area" SIZE=9></NOBR></TD>
</TR>
</TABLE>
</FORM>

gives us the "calculate" button in this form:

radius:

circumference: area:

onClick can return a value to possibly cancel the action the button would normally perform. For example, we can use onClick to double check if the user really wants to reset the form data. In this form, if you click on the reset button, you get a dialog box asking if you really want to cancel. If you choose "cancel", the form is not reset.

<INPUT 
    TYPE=RESET 
    onClick="return confirm('Are you sure you want to reset the form?')"
    >

gives us

name:
email:

onClick is the only event handler for checkboxes and radio buttons. For example, this pizza ordering form has an "everything" option. When "everything" is selected, all the options for toppings go on and stay on, even if they are clicked. We do this by using onClick to call a function which checks if "everything" is on:

<SCRIPT TYPE="text/javascript">
<!--
function checkAll(pizzaForm)
{
if(pizzaForm.everything.checked)
   {
   pizzaForm.mushrooms.checked = true;
   pizzaForm.onions.checked = true;
   pizzaForm.greenpeppers.checked = true;
   pizzaForm.tomatoes.checked = true;
   }
}
//-->
</SCRIPT>

<FORM ACTION="../cgi-bin/mycgi.pl">

<INPUT TYPE=CHECKBOX NAME="everything"   onClick="checkAll(this.form)">everything<P>

<INPUT TYPE=CHECKBOX NAME="mushrooms"    onClick="checkAll(this.form)">mushrooms<BR>
<INPUT TYPE=CHECKBOX NAME="onions"       onClick="checkAll(this.form)">onions<BR>
<INPUT TYPE=CHECKBOX NAME="greenpeppers" onClick="checkAll(this.form)">green peppers<BR>
<INPUT TYPE=CHECKBOX NAME="tomatoes"     onClick="checkAll(this.form)">tomatoes

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

which gives us

everything

mushrooms
onions
green peppers
tomatoes