JavaScript Cookbook

Chapter 9. Form Elements and Validation

9.0. Introduction

Outside of hypertext links, form elements were the very first form of interaction between web developers and web page readers, and were also one of the first reasons for interest in a scripting language.

With the advent of JavaScript, form elements could be validated before the data was sent to the server, saving the reader time and the website extra processing. JavaScript can also be used to modify form elements based on the data the web reader provides, such as filling a selection list with the names of cities when a certain state is selected.

The important point to remember when using JavaScript with form elements is that people turn JavaScript off, so it can’t be a dependency for any form action. JavaScript enhances, not replaces.

Note

Though validating the form on the client can save a round trip, as a sound design practice, you’ll still want to validate the data on the server.

9.1. Accessing Form Text Input Values

Problem

You need to access the contents of a text input form element using JavaScript.

Solution

Use the DOM to access the form element:

var formValue = document.forms["formname"].elements["elementname"].
value;

Discussion

Forms in a web page can be accessed through an object collection (forms) via the document object. Each form has its own collection (elements) of form elements.

Accessing the form element’s value varies, based on the type of form element. For instance, a text input or textarea form element’s value can be ...