JavaScripting for Interactive Educational Webs

[Intro] [Overview] [Basics] [More] [Forms] [If] [Queries] [Time] [Random] [Loops] [Misc.] [References] [HTML]

Using forms in JavaScript

Abstract: A short guide to the roles forms play in JavaScript programs.


Once the HTML community realized that pages might need to be interactive, or at the very least take user input for submitting elsewhere, they developed a set of tags collectively known as the form. Forms can have text entry areas (fields), buttons, radio buttons, and more. Traditionally forms are used to send information to a CGI script.

JavaScript permits you to use forms for input and output and to add other functionality to your pages. With JavaScript, you can read information from fields, put information into fields, and respond to button clicks. If you're using CGI scripts, you can even use JavaScript to massage the query to the CGI script.


Forms begin and end with a <form> tag. The form tag has many parameters, not all of which are useful for JavaScripting.

You insert a text field with

<input type="text" name="..." value="..." size="...">
You need not specify a size nor a default value. You should always name your fields.

You insert a button with

<input type="button" name="..." value="..."onclick="code">
The code describes what should be done when the user clicks on the button.

You insert a radio button with

<input type="radio" name="..." value="...">
In general, radio buttons apprear in groups, and only one radio button in that group should be selected. You group radio buttons by giving them all the same name, but different values. Note that the value is only used internally -- you still need to type text next to the radio button.

Within a form, you insert a checkbox with

<input type="checkbox" name="..." value="...">
Checkboxes are not usually arranged in groups.

If the form is to be submitted to another page, you use

<input type="submit" name="..." value="...>
for the button used to submit the form.

Forms Illustrated

Here is a sample form that illustrates many of the options mentioned above. It may not work.

Grade level: K-12 College Graduate Professional Other
Are you interested in JavaScript HTML Design

Here is the HTML code for that form

<form name="sample" method="get"
Name: <input type="text" name="name" value="Enter your name"> <br>
Grade level:
  <input type="radio" name="grade" value="K12">K-12
  <input type="radio" name="grade" value="College">College
  <input type="radio" name="grade" value="Graduate">Graduate
  <input type="radio" name="grade" value="Profesional">Professional
  <input type="radio" name="grade" value="Other">Other
Are you interested in
  <input type="checkbox" name="javascript">JavaScript
  <input type="checkbox" name="html">HTML
  <input type="checkbox" name="design">Design
<input type="submit" value="Check Values">

Using Fields

You are now ready to use fields in your JavaScript programs. Fields can be used in the same ways that variables are used -- as parts of expressions, as arguments to functions, as objects.

To obtain the value in a field, use document.form-name.field-name.value. To assign a value to a field, simply put it on the left-hand-side of an assignment statement.

Using Buttons

Typically, you have buttons respond to the user clicking on them. However, you can also check the value of button, or whether a checkbox is checked (by looking at the checked property. In the library file misc.js, I've provided a function whichChecked(radiolist) which checks which element of a set of radio buttons is checked.

A Simple Calculator

As an example, we might try to add the values in fields A and B and put the result into field C with something like

<form name="calc">
 A: <input type="text" name="A" size="10"> <br>
 +B: <input type="text" name="B" size="10"> <br>
<input type="button" name="add" value="="
  onClick="document.calc.C.value =
    document.calc.B.value + document.calc.A.value"> <br>
<input type="text" name="C" size="10">

Unfortunately, JavaScript assumes that the contents of a field are strings, rather than numbers. Since + can mean add or concatenate, it concatenates the two strings.

In order to convert strings to numbers, you need to use parseInt() or parseFloat(). We could correct our calculator as follows.

<form name="calc2">
 A: <input type="text" name="A" size="10"> <br>
 +B: <input type="text" name="B" size="10"> <br>
<input type="button" name="add" value="="
  onClick="document.calc2.C.value =
    parseInt(document.calc2.B.value) +
    parseInt(document.calc2.A.value)"> <br>
<input type="text" name="C" size="10">

[Intro] [Overview] [Basics] [More] [Forms] [If] [Queries] [Time] [Random] [Loops] [Misc.] [References] [HTML]

This page written by Samuel A. Rebelsky.

This page generated on 43 by SamR's Site Suite.