Learning JavaScript, 2nd Edition

7.2. Attaching Events to Forms: Different Approaches

The primary event associated with a form is submit, and the event handler is onsubmit. Attaching the event handler to the form using the traditional method takes the following form:

document.formname.onsubmit=formHandler;

When you attach an event handler to the form, incorporate it into a return statement:

<form name="someForm" onsubmit="return formHandler( );">

To cancel the submission, just return false from the event-handler function; then return TRue or no explicit return value, and the form is submitted. In the code snippet, if the formHandler function returned false, the submittal is canceled; if TRue, the form contents are processed as usual.

For the newer event systems, which use either the attachMethod or addEventListener to assign a function to an event, within the submit event-handler function, you'll want to either set cancelBubble to true (for Microsoft), or use the preventDefault method call on the event object passed into the event handler to stop the form submission:

document.formname.addEventListener("submit",formFunction.false); ... function formFunction(evnt) { ... if (evnt.cancelable) evnt.preventDefault( ); }

A typical validation procedure is to capture the submit event, access the individual form elements and check the data, and then provide a message to the web-page reader about what's missing or invalid. If the form is rather large, though, this means that several fields could have bad data, and listing all of them isn't a friendly response.

There are better or different approaches, especially with larger forms. For instance, you can validate each field as the person enters the data or makes a selection. Each of the following sections covers the different form input elements, how to get data from each, and what other tweaks you can perform using JavaScript.