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

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 3 of 3

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 <head> section of the document:


<style>
body{
   font: 10pt sans-serif;
}
.page{
   position: absolute;
   top: 10;
   left: 100;
   visibility: hidden;
}
</style>

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 <script> block to the <head> section of the document:

<script language="JavaScript">
var currentLayer = 'page1';
function showLayer(lyr) {
   hideLayer(currentLayer);
   document.getElementById(lyr)
      .style.visibility = 'visible';
   currentLayer = lyr;
}

function hideLayer(lyr) {
   document.getElementById(lyr).
      style.visibility = 'hidden';
}

function showValues(form) {
   var values = '';
   var len = form.length - 1; 
   //Leave off Submit Button
   for(i=0; i<len; i++) {
      if (form[i].id.indexOf("C") != -1 || 
         form[i].id.indexOf("B") != -1)
         //Skip Continue and Back Buttons
         continue;
         values += form[i].id;
         values += ': ';
         values += form[i].value;
         values += '\n';
      }
      alert(values);
   }
</script>

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.

Download The Code for this Article

Tom Duffy , DevX's JavaScript Pro, is an Associate Professor at Norwalk Community College, Norwalk, CT where he teaches Web Development and Java. Tom is also the Manager of the NCC Ventures Lab, the College's in-house web design studio. You can reach him via e-mail at: tduffy@ncc.commnet.edu.

« Previous Page 1 23

0 Comments (click to add your comment)

Comment and Contribute