Learning JavaScript, 2nd Edition

Chapter 8. Forms, Form Events, and Validation

In JavaScript, you access forms through the Document Object Model (DOM) via the document object using a couple of different approaches. The first approach is to use the forms property on the document object. Forms are just one of the many page elements that are collected in arrays and are attached to the document. Where the form appears in the forms array is dependent on where the form appears in the page, minus 1, as arrays in JavaScript are zero-based. If the page has two forms, you would access the first using the zero (0) index:

var theForm = document.forms[0];

The problem with accessing the form using the array index is that if you change the page—if you add or remove a form—your JavaScript no longer works because the array access is positionally dependent. A better approach is to give the form an identifier, and then to access it using the document’s getElementById method:

<form id="someform" ...>
...
var theForm = document.getElementById("someform");

I used document.getElementById in a couple of examples in Chapter 7, and I’ll use it again in this chapter. I’ll cover the method in more depth in Chapter 9; for now, all you need to know is that the method provides access to a web page element given the element’s identifier. In the preceding code snippet, the method returns access to the form element identified by "someform".

Also, as discussed in Chapter 7, you can intercept a form before submitting it to the server in three ways: you ...