Using forms in JavaScript

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

Introduction
Forms
Forms Illustrated
Using Fields
Using Buttons
A Simple Calculator

Introduction

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

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

name="..." specifies the name of the form. In order to refer to the contents of a form, you'll need to name it.
method="get" specifies how the form is used with CGI scripts. You generally won't need this, although we will soon talk about how to use forms to query other JavaScript pages.
action="url" specifies the URL of the CGI script (of JavaScript page). You'll only need this as above.

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.

Name:
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"
      action="http://www.math.grin.edu/~rebelsky/bin/report.cgi">
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
<br>
Are you interested in
  <input type="checkbox" name="javascript">JavaScript
  <input type="checkbox" name="html">HTML
  <input type="checkbox" name="design">Design
<br>
<input type="submit" value="Check Values">
</form>

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">
</form>

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">
</form>

[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.