Handling Events During Data Entry | JavaScript Professional Projects

The goal of a form designer should be to make filling out a form as easy as possible for the user. Every action a user takes when filling out a form creates an event. Sometimes those events—such as button presses and keyboard events—can be used to aid the user in form completion, and others—like mouse movement events—generally cannot be used to fill out forms. The proper use of events within a form will make visitors' experiences at your site easier and more pleasant by requiring them to type less.

The following example automatically fills out the Billing Address section of the form from the Mailing Address when the user requests it:

 <html>   <head>     <title>       JavaScript Professional Projects - Working with Forms     </title>     <script language="JavaScript">     <!--          function copyForm()          {            document.billingForm.firstLine.value =              document.mailingForm.firstLine.value;            document.billingForm.secondLine.value =              document.mailingForm.secondLine.value;             document.billingForm.thirdLine.value =               document.mailingForm.thirdLine.value;          }        // -->     </script>   </head>   <body>   <center>     <font size=6>JavaScript Professional Projects</font><br>     <font size=4>Chapter 8: Working with Forms</font>    </center>   <br><br>   <br><br>   <table cellspacing="4" cellpadding="4" width="65%">     <tr>     <td>       <form name="mailingForm">         <b><font size="5">Mailing Address<br>         </font></b><br>         <br>          <b>Last name, First name:</b><br>         <input type="text" name="firstLine" size="36"><br>         <b>Street/Address:</b><br>          <input type="text" name="secondLine" size="36"><br>         <b>City State, Zip code:</b><br>         <input type="text" name="thirdLine" size="36">       </form>     </td>      <td>        <form name="billingForm">         <b><font size="5">Billing Address<br>         </font></b>          <input type="checkbox" onClick="JavaScript: copyForm();"                    value="ON">Same as mailing address?<br>         <br>         <b>Last name, First name:</b><br>         <input type="text" name="firstLine" size="36"><br>         <b>Street/Address:</b><br>         <input type="text" name="secondLine" size="36"><br>         <b>City State, Zip code:</b><br>         <input type="text" name="thirdLine" size="36">       </form>     </td>     </tr>   </table>  </body> </html>

This very simple example cuts the amount of time needed to fill out the form in half.

Two events are used very often with forms: the onReset event and the onSubmit event. The onReset event should clear all the elements in the form so that the user can start filling it out from scratch. The onSubmit event handler is generally used for form validation.

Reset Events

The reset feature of forms is very easy to implement. If the user makes a mistake, such as typing in the wrong address, he or she will not want to go back to each form field and remove the previous entries. The Reset button should reset the form to the way it was when the Web page was first loaded.

The following example clears all the value properties of form elements that are not buttons:

 <html>   <head>     <title>       JavaScript Professional Projects - Form Events     </title>     <script language="JavaScript">     <!--        function resetForm( form )        {          for( i = 0 ; i < form.elements.length ; i++ )          {            with( form.elements[i] )            {              if( type != "button" &&                  type != "reset" &&                   type != "submit" )                form.elements[i].value = "";            }          }        }      // -->      </script>   </head>   <body>     <center>       <font size=6>JavaScript Professional Projects</font><br>       <font size=4>Chapter 8: Form Events</font>     </center>     <br><br>     <br><br>     <table cellspacing="4" cellpadding="4" width="65%">       <tr>         <td>            <form name="mailingForm"                   onReset="JavaScript: resetForm( this );">             <b><font size="5">Mailing Address<br>             </font></b><br>             <br>             <b>Last name, First name:</b><br>             <input type="text" name="firstLine" size="36"><br>             <b>Street/Address:</b><br>             <input type="text" name="secondLine" size="36"><br>             <b>City State, Zip code:</b><br>             <input type="text" name="thirdLine" size="36">&nbsp;&nbsp;             <input type="reset" value="Reset" name="B1">           </form>         </td>       </tr>     </table>   </body> </html>

This example loops through each field in the form and if the field is not a button, clears the data that has been input to it.

Submit Events

Form validation is a slightly more complicated way to reset events. Form validation occurs after the visitor has entered data into the form and before it is submitted to the server. The function of form validation is to make sure that all form fields have data and that the data that has been entered into the form correctly.

Here is a simple example that checks to make sure that data has been entered into the form before it is submitted:

 <html>   <head>     <title>       JavaScript Professional Projects - Form Events     </title>     <script language="JavaScript">     <!--        function validate()        {          if( isNaN( document.theForm.theText.value ) )          {             alert( "Please input a Number!" );             document.theForm.theText.value = "";             return( false );          }          else return( true );        }      // -->      </script>   </head>   <body>     <center>       <font size=6>JavaScript Professional Projects</font><br>       <font size=4>Chapter 8: Form Events</font>     </center>     <br><br>     <br><br>       <form name="theForm" onSubmit="JavaScript: return( validate() );">       Input a number<br>       <input type="text" name="theText" size="20">&nbsp;&nbsp;&nbsp;       <input type="submit" value="Insert">     </form>   </body> </html>

Form validation will be explained in more detail later in this chapter.

Select Events

There are, of course, other events that can be used with forms—mainly selection events. A select event occurs when the visitor clicks on any of the contents of a form field. Selecting text in a text box or text area or choosing an option in a drop-down list will create a selection event. Most of the selection events that you'll deal with when programming in JavaScript will come from the select box form elements, so that is what I'll focus on here.

Following is an example that allows a user to change the current page by selecting an option from a drop-down list:

 <html>   <head>     <title>       JavaScript Professional Projects - Form Events     </title>        <script language="JavaScript">     <!--        function validate()        {          if( isNaN( document.theForm.theText.value ) )          {             alert( "Please input a Number!" );             document.theForm.theText.value = "";             return( false );          }          else return( true );        }      // -->      </script>   </head>      <body>     <center>       <font size=6>JavaScript Professional Projects</font><br>     <font size=4>Chapter 8: Form Events</font>     </center>     <br><br>     <br><br>     <form name="theForm">          Select a search engine to use:&nbsp;          <select size="1" name="Menu"               onChange="JavaScript: window.location=                 this.options[this.options.selectedIndex].value;">               <option value="http://www.google.com/">Google</option>               <option value="http://www.yahoo.com/">Yahoo</option>               <option value="http://www.dogpile.com/ ">Dogpile</option>               <option value="http://www.altavista.com/">Altavista</option>          </select>     </form>   </body> </html>

This example redirects the page to the location selected in the drop-down box. This technique is very popular, even though there are much better ways to accomplish the same thing (namely, by using normal anchor tags or by using DHTML). However, the example does effectively illustrate how to use selection events.