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

Javascript wears many hats. You can use JavaScript to create special effects. You can use JavaScript to make your HTML pages "smarter" by exploiting its decision-making capabilities. And you can use JavaScript to enhance HTML forms. This last application is of particular importance. Of all the hats JavaScript can wear, its form processing features are among the most sought and used.

Nothing strikes more fear in the heart of a Web publisher than these three letters: C-G-I. CGI (which stands for common gateway interface), is a mechanism for safely transporting data from a client (a browser) to a server. It is typically used to transfer data from an HTML form to the server.

With JavaScript at your side, you can process simple forms without invoking the server. And when submitting the form to a CGI program is necessary, you can have JavaScript take care of all the preliminary requirements, such as validating input to ensure that the user has dotted every i. In this column we'll look closely at the JavaScript-form connection, including how to use JavaScript's form object, how to read and set form content, and how to trigger JavaScript events by manipulating form controls. We'll also cover how to use JavaScript to verify form input and sumbit the form to a CGI program.

Learning JavaScript

This article is part of the JavaWorld technical content archive. You can learn a lot about JavaScript programming by reading articles in the JavaScript series, just keep in mind that some of the information is likely to be outdated. See "Using JavaScript's built-in objects" and "Debugging JavaScript programs" for more about programming with JavaScript.

Creating the form

There are few differences between a straight HTML form and a JavaScript-enhanced form. The main one being that a JavaScript form relies on one or more event handlers, such as onClick or onSubmit. These invoke a JavaScript action when the user does something in the form, like clicking a button. The event handlers, which are placed with the rest of the attributes in the HTML form tags, are invisible to a browser that don't support JavaScript. Because of this trait, you can often use one form for both JavaScript and non-JavaScript browsers.

Typical form control objects -- also called "widgets" -- include the following:

  • Text box for entering a line of text
  • Push button for selecting an action
  • Radio buttons for making one selection among a group of options
  • Check boxes for selecting or deselecting a single, independent option

I won't bother enumerating all the attributes of these controls (widgets), and how to use them in HTML. Most any reference on HTML will provide you with the details. For use with JavaScript, you should always remember to provide a name for the form itself, and each control you use. The names allow you to reference the object in your JavaScript-enhanced page.

The typical form looks like this. Notice I've provided NAME= attributes for all form controls, including the form itself:

<FORM NAME="myform" ACTION="" METHOD="GET">
Enter something in the box: <BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
</FORM>
  • FORM NAME="myform" defines and names the form. Elsewhere in the JavaScript you can reference this form by the name myform. The name you give your form is up to you, but it should comply with JavaScript's standard variable/function naming rules (no spaces, no weird characters except the underscore, etc.).
  • ACTION="" defines how you want the browser to handle the form when it is submitted to a CGI program running on the server. As this example is not designed to submit anything, the URL for the CGI program is omitted.
  • METHOD="GET" defines the method data is passed to the server when the form is submitted. In this case the atttibute is puffer as the example form does not submit anything.
  • INPUT TYPE="text" defines the text box object. This is standard HTML markup.
  • INPUT TYPE="button" defines the button object. This is standard HTML markup except for the onClick handler.
  • onClick="testResults(this.form)" is an event handler -- it handles an event, in this case clicking the button. When the button is clicked, JavaScript executes the expression within the quotes. The expression says to call the testResults function elsewhere on the page, and pass to it the current form object.

Getting a value from a form object

Let's experiment with obtaining values from form objects. Load the page, then type something into the text box. Click the button, and what you typed is shown in the alert box.

  • Print
  • Feedback