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.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

The Latest

Top 5 B2B SaaS Marketing Agencies for 2023

In recent years, the software-as-a-service (SaaS) sector has experienced exponential growth as more and more companies choose cloud-based solutions. Any SaaS company hoping to stay ahead of the curve in this quickly changing industry needs to invest in effective marketing. So selecting the best marketing agency can mean the difference

technology leadership

Why the World Needs More Technology Leadership

As a fact, technology has touched every single aspect of our lives. And there are some technology giants in today’s world which have been frequently opined to have a strong influence on recent overall technological influence. Moreover, those tech giants have popular technology leaders leading the companies toward achieving greatness.

iOS app development

The Future of iOS App Development: Trends to Watch

When it launched in 2008, the Apple App Store only had 500 apps available. By the first quarter of 2022, the store had about 2.18 million iOS-exclusive apps. Average monthly app releases for the platform reached 34,000 in the first half of 2022, indicating rapid growth in iOS app development.