Home » Create Fast, Smooth Multi-page Forms with JavaScript

Create Fast, Smooth Multi-page Forms with JavaScript

eb Developers constantly make trade-offs; sometimes sacrificing usability for speed and sometimes sacrificing speed for usability. One example of such a trade-off becomes evident when you consider the task of creating a multi-page form. Multi-page forms are common, because on one hand, developers try to avoid lengthy pages that force the user to scroll more than is necessary. On the other hand, developers attempt to avoid expensive return trips to the server to serve multiple pages when one will do. When you separate multi-page forms into separate Web pages, the complexities of storing state come into play: Multi-page forms are more difficult to manage than single-page forms, because developers must store the user entries from preceding pages and create navigational aids for moving forward and backward between the form’s pages.When you decide to opt for a multi-page form over a long scrolling from, you then have to decide how much of the form to display to the user on each page, as well as how many trips (pages) to the server you can tolerate. So the problem is:

How do I create a multi-page form that minimizes both scrolling and the number of round-trips to the server?

Place all the HTML code for the form on a single page, with each page wrapped in a

tag, and then use some basic JavaScript to provide navigation through the “pages” of the form, submitting the data only once, and letting you treat the data on the server as a single-page form.

Solving the Multi-page Form Problem
The solution to the multi-page form problem is deceptively simple. The sample code (see Resources) for this solution sets up some default display conditions for the user to see when the page loads, then provides chunks of a lengthy form in bites that users can digest. At the bottom of each form chunk, a button provides navigation to the next chunk of the form. For all but the first chunk an additional button allows the user to back up. The trick is to wrap the chunks of the form inside

tags and then toggle the visibility property for each div between visible and hidden to hide and show the portions of the form. You wrap all the

tags inside a single

tag so that form submission occurs only once. The sample code that accompanies this article works in IE 5.5+ and Netscape 6.2+.

Setup the Form
Open your favorite text editor and add the following code to setup the form. The full example has four

tags that represent the “pages” of the form. Figure 1 shows the first page of the form. The following code excerpt defines the first two pages:


Figure 1. The Sample Form: Users click the Continue button to show the next page.”

Multi-Page Form  Question 1 
  Question 2 
  Question 3 
  Question 4 
  Question 5 
  
  Question 6 
  Question 7 
  Question 8 
  Question 9 
  Question 10

As you can see, the only difference between this form and other lengthy forms is the inclusion of the navigation buttons and the

tags.

Write the CSS Rules
The next step is to write the CSS rules that hide and show the chunks of the form. Add the following style sheet rules to the section of the document:

The result is that the page1 layer is visible to the user (via the inline style rule style=”visibility:visible;”). The subsequent layers of the form are initially hidden, because the HTML doesn’t contain the inline style. Remember, inline stylesheet rules override more general rules, so the inline style=”visibility:visible rule takes precedence over the more general style setting (visibility: hidden;) in the .page class’ stylesheet definition.

Write the JavaScript Routines
The only thing left to do is to write the JavaScript routines that show or hide the correct chunk of the form as users click the navigation buttons. Add the following

There are a couple of things to note here. First, the currentLayer variable is the variable that keeps track of which chunk of the form is currently visible. Second, when a user clicks a button, the button's onClick event calls the showLayer() function, passing the appropriate layer name as a parameter. The showLayer() function first hides the current layer (stored in the currentLayer variable), and then makes the requested layer visible. Finally, showLayer() stores the requested layer in the currentLayer variable.

The showValues() function wouldn't be part of a "real" application. It exists here solely to prove that you can extract the significant data from the form easily. Essentially, the routine loops through all of the controls in the form except for the Submit button and builds a string to display the name of the control and its corresponding value. You wouldn't want to store the values of the Continue and Go Back buttons, so the code uses a simple naming convention trick to skip them when building the string: the code skips any controls whose ID contains a "C" or a "B". You will need to adjust this routine to exclude the navigation controls in your own forms.

if (form[i].id.indexOf("C") !=  -1 ||    form[i].id.indexOf("B") != -1)   //Skip Continue and Back Buttons   continue;

Finally, the sample code pops up an alert box to display the fields and their values rather than submit them to a server. Youll need to change the action attribute of the form to point to your form handler for this to do something useful.

This simple JavaScript solution solves both of the problems with multi-page forms described at the beginning of this article?it displays the form in easily digestible chunks while still requiring only a single trip to the server for submission. You can validate the form in smaller chunks as well, for example, preventing navigation from page to page if the user has neglected to enter a required value, or entered an incorrect value for a control. See my previous article on Form Validation for details on automatic form validation. This simple technique to split a form into multiple pages has the power to both improve your user interfaces and simultaneously simplify the process of developing long multi-page entry forms.

About Our Editorial Process

At DevX, we’re dedicated to tech entrepreneurship. Our team closely follows industry shifts, new products, AI breakthroughs, technology trends, and funding announcements. Articles undergo thorough editing to ensure accuracy and clarity, reflecting DevX’s style and supporting entrepreneurs in the tech sphere.

See our full editorial policy.