JavaScript and DHTML Cookbook, from O'Reilly. Chapter 8 Dynamic Forms | 3

JavaScript & DHTML Cookbook
www.oreilly.com/catalog/jvdhtmlckbk/?CMP=OT20145
By Danny Goodman
O'Reilly & Associates, April 2003
ISBN: 0-596-00467-2

Chapter 8: Dynamic Forms

Introduction

Giving scripted intelligence to web forms was the impetus that led to the development of the JavaScript language and the notion of a document object model. While a lot has happened to scripting in the meantime, forms still make frequent use of scripts to assist with user-friendly instantaneous interaction that otherwise requires a two-way trip to the server (and delays for the user) to accomplish.

Because of the comparatively long history of scriptable forms and form controls, it is comforting to know that most such scripts work with a wide range of browsers, and not just those that implement the W3C DOM. Even so, there are some misunderstandings about the combination of scripts and forms that I'll attempt to clear up in this chapter.

Referencing Forms and Controls

Before the W3C DOM, scripts used what is now known as DOM Level 0 syntax to reference form objects and the form controls (input and textarea elements) within them. This long-time convention relies for the most part on the form and controls having name attributes assigned to them. In fact, even today's browsers won't submit form control values to the server unless the elements have names assigned to them (independent of the now ubiquitous id attribute). At the same time, however, the object model provides arrays of forms and form elements, which can be accessed through JavaScript array syntax and numerical index values. For example, if a document contains a single form whose name is userInfo, backward-compatible scripts can reference the form object in any of the following ways:

document.forms[0]
document.forms["userInfo"]
document.userInfo

Each form element object also contains an elements array that contains references to all of the recognized form controls nested inside the frame. For example, if the second input element of the userInfo form is a text box named age, you have three ways to reference that text box for each of the three ways you can use to reference the containing form. Using just one containing form reference, here is an example of three equivalent references to the age text box:

document.userInfo.elements[1]
document.userInfo.elements["age"]
document.userInfo.age

Notice how this syntax follows the element containment hierarchy: document to form to control. This allows for the possibility of a form control's name being reused in multiple forms on the page--something not possible (or at least not encouraged) with id attributes.

In browsers supporting scriptable id attributes of elements (IE 4 or later and NN 6 or later), you can also reference a form directly by way of the object model syntax(es) supported by the browser. For example, in IE 4 and later, you can use the Microsoft DOM reference syntax:

document.all.formID
document.all.formControlID

For W3C DOM syntax (IE 5 or later and NN 6 or later), use the regular element-referencing syntax:

document.getElementById("formID")
document.getElementById("formControlID")

Even though your scripts can use only the ID to build references, you'll want to assign an identifier to both the name and id attributes of each element if the form is to be submitted to the server. You can use the same identifier for both attributes of an element and not risk collisions.

Browser versions that you need to support with your scripts should dictate the syntax you use to address forms and controls. If backward-compatibility is of any concern with your audience (including Navigator 4), stick with the DOM Level 0 syntax. It will continue to be supported in new mainstream browsers for a long time to come.

Created: March 27, 2003
Revised: May 6, 2003

URL: https://webreference.com/programming/java_dhtml/chap8/1