Newsletter sign-up
View all newsletters

Enterprise Java Newsletter
Stay up to date on the latest tutorials and Java community news posted on JavaWorld

Sponsored Links

Optimize with a SATA RAID Storage Solution
Range of capacities as low as $1250 per TB. Ideal if you currently rely on servers/disks/JBODs

JavaWorld.com > Java Development Tools >

Using JavaScript and forms

Of all the hats JavaScript can wear, its form processing features are among the most sought and used

By Gordon Mccomb, JavaWorld.com, 06/01/96

  • Print
  • Feedback
.

Page 6 of 7

Listing 7. onsubmit.html

<HTML>
<HEAD>
<TITLE>onSubmit Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mailMe(form){
    Subject=document.testform.inputbox1.value;
    CC= document.testform.inputbox2.value;
    BCC= document.testform.inputbox3.value;
    location = "mailto:jwedit@javaworld.com?subject="+Subject+"&Bcc="+
        BCC+"&cc="+CC;
    return true;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="testform" onSubmit="return mailMe(this.form)" >Subject of message: <BR>
<INPUT TYPE="text" NAME="inputbox1" VALUE="This is such a great form!" SIZE=50>
<P>Send cc to: <BR>
<INPUT TYPE="text" NAME="inputbox2" VALUE="" SIZE=50><P>
Send blind cc to: <BR>
<INPUT TYPE="text" NAME="inputbox3" VALUE="" SIZE=50><P>
<INPUT TYPE="submit"><BR>
</FORM>
</BODY>
</HTML>

Using submit

In the next example the submit method is used instead. The script is little changed, except that the onSubmit handler is removed, and an onClick hander for a renamed form button is added in its place. The submit() method replaces the return true statement in the previous example. (Personally, I prefer the submit method because it provides a little more flexibility. But either one will work.)

Listing 8. submit.html

<HTML>
<HEAD>
<TITLE>test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function mailMe(form){
    Subject=document.testform.inputbox1.value
    CC= document.testform.inputbox2.value
    BCC= document.testform.inputbox3.value
    location = "/javaworld/cgi-bin/jw-mailto.cgi?jwedit@javaworld.com?subject="+Subject+"&Bcc="+
        BCC+"&cc="+CC
    document.testform.submit();
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="testform">
Subject of message: <BR>
<INPUT TYPE="text" NAME="inputbox1" VALUE="This is such a great form!" SIZE=50><P>
Send cc to: <BR><INPUT TYPE="text" NAME="inputbox2" VALUE="" SIZE=50><P>
Send blind cc to: <BR><INPUT TYPE="text" NAME="inputbox3" VALUE="" SIZE=50><P>
<INPUT TYPE="button" VALUE="Send Mail" onClick="mailMe()"><BR>
</FORM>
</BODY>
</HTML>

Validating form data using JavaScript

The World Wide Web "grew up" when they added the ability to display forms. In the days before forms, the Web was only mildly interactive, with just hypertext links to take readers from location to location. Forms allow users to truly interact with the Web. For example, readers can specify search queries using a simple one-line text box.

The typical form as used on a Web page consists of two parts: the form itself, which is rendered in the browser, and a CGI script or program located on the server. This script processes the user's input. While it's not exactly rocket science, a stumbling block in creating great Web forms is writing the CGI program. In most cases these programs are written in Perl or C, and can be a bother to implement and debug. A primary job of the CGI program is to validate that the reader has provided correct data, and this can requires pages of code.

JavaScript changes that. With JavaScript you can check the data provided by the reader before it's ever sent to the CGI program. In this way the CGI program can be kept to a bare minimum. And, because the data is only sent after it has been validated, the server need not be bothered until the form entry is known to be good. This saves valuable server resources.

  • Print
  • Feedback