Create Fast, Smooth Multi-page Forms with JavaScript : Page 2

Developing a multi-page form inevitably involves tradeoffs. To avoid long scrolling forms, developers often think they're forced to implement lengthy and slow round-trips to get subsequent pages and to confront the complexities of storing state between the form pages. But using JavaScript, you can both avoid scrolling and eliminate wasteful round trips.

by Tom Duffy

Jan 15, 2003

Page 2 of 3

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 <div> tags inside a single <form> 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 <div> 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."

<html>
<head>
<title>Multi-Page Form</title>
</head>

<body>
<form id="multiForm" method="POST" 
   action="javascript:void(0)" 
   onSubmit="showValues(this)">
<div id="page1" class="page" 
   style="visibility:visible;">
  <p>Question 1 <input type="text" id="T1" 
      size="20"></p>
  <p>Question 2 <input type="text" id="T2" 
      size="20"></p>
  <p>Question 3 <input type="text" id="T3" 
      size="20"></p>
  <p>Question 4 <input type="text" id="T4" 
      size="20"></p>
  <p>Question 5 <input type="text" id="T5" 
      size="20"></p>
  <p><input type="button" id="C1" value="Continue" 
      onClick="showLayer('page2')"></p>
</div>
<div id="page2" class="page">
  <p>Question 6 <input type="text" id="T6" 
      size="20"></p>
  <p>Question 7 <input type="text" id="T7" 
      size="20"></p>
  <p>Question 8 <input type="text" id="T8" 
      size="20"></p>
  <p>Question 9 <input type="text" id="T9" 
      size="20"></p>
  <p>Question 10 <input type="text" id="T10" 
      size="20"></p>
  <p><input type="button" id="B1" value="Go Back" 
      onClick="showLayer('page1')">
      <input type="button" id="C2" value="Continue" 
         onClick="showLayer('page3')"></p>
</div>
<!-- more pages here -->
</form>
</body>
</html>

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

Download The Code for this Article

« Previous Page 123 Next Page »

0 Comments (click to add your comment)

Comment and Contribute