Uncle Jims Web Designs

Form Navigation

This script presents the user with a series of forms. Each successive form is presented without requiring a round-trip to the server. Upon completion, all user input is collected for use as needed (e.g. submit, email). The implementation is generic, making it easy for developers to plug in any set of forms.

There are several key HTML and Javascript features I have relied on to ensure a generic implementation

By controlling display properties, we can selectively display and hide various elements populating a page. Form arrays permit us to index the forms, and similarly function arrays enable us to use the same indexing mechanism to access and invoke a set of functions associated with any given form. In order to make the forms navigable, there are a few conventions which must be observed.

Name and Address

Last Name First Name MI
Address
City State Zip
Email

 At all times, the display property for all forms except one is none; for example, when initially defining your forms you'll have something like this:

"form1" ...

"form2" style=display:none ...
"form3" style=display:none ...
"form4" style=display:none ...

To facilitate navigation, each form is equipped with navigation buttons. These consist of next, previous, finish and submit, defined as follows:

"button" value="Next" onclick="next();">
"button" value="Previous" onclick="previous();"
"button" value="Finish" name="Finish" onclick="SubmitIt()">
"button" value="Submit" onclick="SubmitIt();" name="SubmitIt">

Note that no form has all four buttons. The first in the series will have the next & finish  button, but no previous or submit buttons. The last form will have a  previous and a submit button, but no next. All intermediary buttons will have next,  previous, and finish buttons, but no submit. That's my recommendation; of course with your own forms, you may do as you wish.

Expected Lifetime Income

$0.00 - $5.99
$6.00 - $1,000,000.00
$1,000,000,000.01 - $10,000,000,000.00
$10,000,000,000.01 or greater

To facilitate client-side validation, a validation function is defined for each form, and a pointer to each function is placed in an array that parallels the form array (you don't have to defined a form array, HTML does that for you. So you'll have something like this:

var maxform = document.forms.length;
var validation_functions = new Array( maxform );

validation_functions[ 1 ] = validate_form1;
validation_functions[ 2 ] = validate_form2;
validation_functions[ 3 ] = validate_form3;
validation_functions[ 4 ] = validate_form4;

function validate_form1() { /* do validation */ return ( true ); } 
function validate_form2() { /* do validation */ return ( true ); }
function validate_form3() { /* do validation */ return ( true ); }
function validate_form4() { /* do validation */ return ( true ); }

This enables the next() function, called when the user clicks the next or submit button, to index into the validate_functions array and call the appropriate function. If the validation function returns true, the next function proceeds to the next form. If it returns false, it returns the user to the current form.

You must provide a validation function for every form.

Hobbies

Yes

The next() and previous() functions are invoked in response to the user selecting the next and previous buttons. They are quite simple, but they are really the heart of the implementation. So maybe they're worth looking at in detail.

First, previous() simply sets the boolean flag prev to true, then it invokes next().

function previous()
{

    prev = true;
    next();

}

Political Leanings

Read Slate
Subscribe but don't read Time
Read whatchamicallit

Function next() first sets the current form display property to none. Then if the prev is true, it decrements fnum, the global form counter.  Otherwise, all indications are that the user intends to proceed to the next form, so it's necessary to invoke the validation function for the current form.  If the validation fnction returns false, next() returns the display property to normal, thereby restoring visibility.  If the validation function returns true, next() performs a sanity check to ensure that fnum is within range and then increments fnum.  Lastly, next() sets the display property for the current form, as defined by fnum, to normal.

function next()
{

    document.forms[fnum].style.display = "none";

    if ( prev == true && fnum >= 1 ) {
        --fnum;
        prev = false;
   }
   else if ( validate_form() == false ) {
        document.forms[fnum].style.display = "";
       return;
   }
   else if ( fnum <= maxform - 2 ) {
        ++fnum;
   }

    document.forms[fnum].style.display = "";

}

 

Last but not least, there is the submit function.  As implemented here, submit simply summarizes your input in the browser window, sort of like this:

function SubmitIt()
{
    var i, j;
   var str = 'Polyforms

Polyforms


';
   var formname = '"

" + document.forms[i].name + "

"';
   var elemname = '"
  • " + document.forms[i].elements[j].name + ": " + 
                 document.forms[i].elements[j].value + " " +
                document.forms[i].elements[j].type + "

    • "';

        document.forms[fnum].style.display = "none";

        for ( i=0; i < maxform; i++ ) {
                str += eval( formname );
                for ( j=0; j < document.forms[i].elements.length; j++ ) {
                    switch( document.forms[i].elements[j].type ) {
                        case "button":
                        case "reset":
                            break;
                        case "radio":
                        case "checkbox":
                            if ( document.forms[i].elements[j].checked == true ) {
                                str += eval( elemname );
                            }
                            break;
                        default:
                            str += eval( elemname );
                    }
                }
           }
           document.write( str );
    }