Sending Form Results by Email / Sams Teach Yourself JavaScript in 24 Hours

One easy way to use a form is to send the results by email. You can do this without using any JavaScript, although you could use JavaScript to validate the information entered (as you'll learn later in this hour).

To send a form's results by email, you use the mailto: action in the form's action attribute. Listing 11.2 is a modified version of the name and address form from Listing 11.1 that sends the results by email.

Listing 11.2. Sending a Form's Results by Email

<html>
<head>
<title>Email Form Example</title>
</head>
<body>
<h1>Email Form Example</h1>
Enter the following information. When you press the Submit button,
the data you entered will be sent by email.
<form name="form1" action="mailto:user@host.com"
  enctype="text/plain" method="POST">
<p><b>Name:</b> <input type="TEXT" size="20" name="yourname">
</p>
<p><b>Address:</b> <input type="TEXT" size="30" name="address">
</p>
<p><b>Phone: </b> <input type="TEXT" size="15" name="phone">
</p>
<p><input type="submit" value="Submit"></p>
</form>
</body>
</html>

To use this form, change user@host.com in the action attribute of the <form> tag to your email address. Notice the enctype=text/plain attribute in the <form> tag. This ensures that the information in the email message will be in a readable plain-text format rather than encoded.

Although this provides a quick and dirty way of retrieving data from a form, the disadvantage of this technique is that it is highly browser dependent. Whether it will work for each user of your page depends on the configuration of his or her browser and email client.

Watch Out!

Because this technique does not consistently work on all browsers, I don't recommend you use it. For a more reliable way of sending form results, you can use a CGI form-to-email gateway. Several free CGI scripts and services are available. You'll find links to them on this book's website.

Try It Yourself

Validating a Form

One of JavaScript's most useful purposes is validating forms. This means using a script to verify that the information entered is validfor example, that no fields are blank and that the data is in the right format.

You can use JavaScript to validate a form whether it's submitted by email or to a CGI script, or is simply used by a script. Listing 11.3 is a version of the name and address form that includes validation.

Listing 11.3. A Form with a Validation Script

<html> <head> <title>Form Example</title> <script language="JavaScript" type="text/javascript"> function validate() { if (document.form1.yourname.value.length < 1) { alert("Please enter your full name."); return false; } if (document.form1.address.value.length < 3) { alert("Please enter your address."); return false; } if (document.form1.phone.value.length < 3) { alert("Please enter your phone number."); return false; } return true; } </script> </head> <body> <h1>Form Example</h1> <p>Enter the following information. When you press the Submit button, the data you entered will be validated, then sent by email.</p> <form name="form1" action="mailto:user@host.com" enctype="text/plain" method="POST" onSubmit="return validate();"> <p><b>Name:</b> <input type="TEXT" size="20" name="yourname"> </p> <p><b>Address:</b> <input type="TEXT" size="30" name="address"> </p> <p><b>Phone: </b> <input type="TEXT" size="15" name="phone"> </p> <p><input type="SUBMIT" value="Submit"></p> </form> </body> </html>

This form uses a function called validate() to check the data in each of the form fields. Each if statement in this function checks a field's length. If the field is long enough to be valid, the form can be submitted; otherwise, the submission is stopped and an alert message is displayed.

By the Way

The validation in this script is basicyou could go further and ensure that the phone field contains only numbers, and the right amount of digits, by using JavaScript's string features described in Hour 5, "Using Variables, Strings, and Arrays."

This form is set up to send its results by email, as in Listing 11.2. If you wish to use this feature, be sure to read the information about email forms earlier in this hour and change user@host.com to your desired email address.

The <form> tag uses an onSubmit event handler to call the validate() function. The return keyword ensures that the value returned by validate() will determine whether the form is submitted.

Did you Know?

You can also use the onChange event handler in each form field to call a validation routine. This allows the field to be validated before the Submit button is pressed.

Figure 11.2 shows this script in action, as displayed by Firefox. The form has been filled out except for the name, and a dialog box indicates that the name needs to be entered.

Figure 11.2. The form validation example in action.

[View full size image]

Index: [SYMBOL][A][B][C][D][E][F][G][H][I][J][K][L][M][N][O][P][Q][R][S][T][U][V][W][X][Y]