Multi-Page Forms with JavaScript and Cookies

Sometimes, a multi-page form is just better than a one-page form:

1. Depending on the form's purpose and site visitor demographics, it may be desirable to present many smaller forms, in succession, than one very large form.

2. For some forms, an answer in the current form determines which form page is presented next.

3. Smaller, multi-page forms may be more aesthetically pleasing than one large form.

If you will be using Master Form V4. as your form processor, the software has multi-page form functionality built in. You won't need this article.

If your form processing software does not have multi-page form capability, this article shows you how to carry the information from one form page to another using JavaScript and cookies.

How It Works

When the first form page is submitted, JavaScript stores the form field values in a cookie. The JavaScript then redirects the browser to the second form page.

At the second form page, JavaScript retrieves the values from a cookie and writes hidden fields into the second page form. The field values from the first form are now stored in the second form.

When the second form page is submitted, a cookie stores the values, the browser is redirected, and the third form receives hidden fields with the values retrieved from the cookie.

And so forth, until the last of the multi-page form is loaded into the browser.

The limits to how many forms you can string together are (1) the amount of information carried from form to form (the amount of information that can be stored in a cookie is four kilobytes) and (2) the form user's patience.

Only the last of the multi-page forms is submitted to the normal form handling software. And that submission includes the information carried over from previous forms.

Making It Work For You

It is suggested that you create your multi-page form first. Once all form pages are created, come back and do these steps.

There are instructions for the first form page and for the last form page. If your form is more than two pages, you'll find instructions to apply to each of the middle pages.

Last, there is a large block of JavaScript code to insert into each form page. You'll find instructions for customizing two places in the JavaScript. (The ezine version of this article has a link where the JavaScript can be obtained.)

Okay, here we go.

The First Form Page —

The form tag of the first form page has a name attribute and an onsubmit attribute — no action attribute and no method attribute.

The name attribute specifies the name of the form. (The form name is also specified in the JavaScript, see below.)

The onsubmit attribute returns the value of the JavaScript GoToURL() function, which also specifies the URL of the next form page. Here is an example:

<form 
   name="MyForm" 
   onsubmit="return GoToURL('http://example.com/page2.html');">

The Last Form Page —

The last form page should have an action attribute and a method attribute, their values what would normally be used in a one-page form. It should *not* contain the onsubmit attribute with the GoToURL() function.

In the web page source code, somewhere below the <form...> tag and above the closing </form> tag, put this Java:

<script type="text/javascript" language="JavaScript">
InsertPreviousInformation();
</script>

Where you put the JavaScript is where the information from the previous form page(s) will be inserted. The information is inserted into the form with hidden fields. It is then part of the current form.

Any Middle Form Pages —

If the form has three or more pages, the pages between the first and the last need to have a <form...> tag like the first page and the three lines of JavaScript like the last page.

ALL Form Pages —

All form pages need to have the main JavaScript code. It's 120+ lines.

Put the Javascript somewhere above each of the forms.

<script type="text/javascript" language="JavaScript">
<!-- Copyright 2007 Bontrager Connection, LLC
// See the "Multi-Page Forms with JavaScript and Cookies" 
//    article for more information. The article was first 
//    published in Possibilities ezine described at 
//    /library/

// The form's <form...> tag needs to contain this attribute:
//        onsubmit="GoToURL('http://example.com/page2.html');"
//    Replace the URL between the single quotes with the URL 
//    of the next form page.

// Put this JavaScript somewhere above the form.

// Two variables in this JavaScript can be customized.

// Customizable variable 1:
// Between the quotation marks, specify the form name:
var FormName = "MyForm";

// Customizable variable 2:
// Between the quotation marks, specify the cookie name:
var CookieName = "MultiPageFormCookie";


////////////////////////////////////////////////
//                                            //
//  No other customizations need to be done.  //
//                                            //
////////////////////////////////////////////////

function GetCookie() {
if(document.cookie.length < 1) { return ''; }
var cookiename = CookieName + '=';
var cookiebegin = document.cookie.indexOf(cookiename);
cookiebegin += cookiename.length;
var cookieend = document.cookie.indexOf(";",cookiebegin);
if(cookieend < cookiebegin) { cookieend = document.cookie.length; }
return document.cookie.substring(cookiebegin,cookieend);
} // function GetCookie()


function InsertPreviousInformation() {
var CookieString = GetCookie();
if(CookieString.length < 3) { return; }
CookieString = unescape(CookieString);
var CookiePieces = CookieString.split('\t\t');
for(var i = 0; i < CookiePieces.length; i++) {
   var pieces = CookiePieces[i].split('\t');
   if(pieces.length < 2) { continue; }
   document.write('<input type="hidden" name="'+pieces[0]+'" value="'+pieces[1]+'">');
   }
} // function InsertPreviousInformation()


function GoToURL(nextpage) {
var l = new Number();
eval('l = document.' + FormName + '.elements.length')
var NameList = new Array();
for (var i = 0; i < l; i++) { 
   var FIELDname = new String();
   var FORMfields = new Number();
   eval('FIELDname = document.' + FormName + '.elements[i].name;');
   if(FIELDname.length < 1) { continue; }
   eval('FORMfields = document.' + FormName + '.' + FIELDname + '.length');
   if(parseInt(FORMfields) > 1) { FORMfields = parseInt(FORMfields); }
   else { FORMfields = 1; }
   NameList.push(FIELDname + '\t' + FORMfields);
   }
var FORMvalue = new String();
var FORMtype = new String();
var Done = new String();
var CookiePieces = new Array();
for (var i = 0; i < NameList.length; i++) { 
   var FORM_NL = NameList[i].split('\t');
   if(Done.indexOf(' ' + FORM_NL[0] + ' ') > -1) { continue; }
   Done += ' ' + FORM_NL[0] + ' ';
   if(FORM_NL[1] == 1) {
      FORMvalue = '';
      eval('FORMtype = document.' + FormName + '.' + FORM_NL[0] + '.type;');
      if( (FORMtype.indexOf('radio') > -1) || (FORMtype.indexOf('checkbox') > -1) ) {
         var checked = false;
         eval('checked = document.' + FormName + '.' + FORM_NL[0] + '.checked;');
         if(checked == true) { eval('FORMvalue = document.' + FormName + '.' + FORM_NL[0] + '.value;'); }
         }
      else {
         if(FORMtype.indexOf('select') > -1) {
            var checked = false;
            eval('checked = document.' + FormName + '.' + FORM_NL[0] + '.selected;');
            if(checked == true) { eval('FORMvalue = document.' + FormName + '.' + FORM_NL[0] + '.value;'); }
            }
         else { eval('FORMvalue = document.' + FormName + '.' + FORM_NL[0] + '.value;'); }
         }
      if(FORMvalue.length < 1) { continue; }
      CookiePieces.push(FORM_NL[0] + '\t' + FORMvalue);
      continue;
      } 
   for(var ii = 0; ii < FORM_NL[1]; ii++) {
      FORMvalue = '';
      eval('FORMtype = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].type;');
      if(FORMtype == undefined) { eval('FORMtype = document.' + FormName + '.' + FORM_NL[0] + '.type;'); }
      if( (FORMtype.indexOf('radio') > -1) || (FORMtype.indexOf('checkbox') > -1) ) {
         var checked = false;
         eval('checked = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].checked;');
         if(checked == true) { eval('FORMvalue = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].value;'); }
         }
      else {
         if(FORMtype.indexOf('select') > -1) {
            var checked = false;
            eval('checked = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].selected;');
            if(checked == true) { eval('FORMvalue = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].value;'); }
            }
         else { eval('FORMvalue = document.' + FormName + '.' + FORM_NL[0] + '[' + ii + '].value;'); }
         }
      if(FORMvalue.length < 1) { continue; }
      CookiePieces.push(FORM_NL[0] + '\t' + FORMvalue);
      } 
   }
var CookieString = new String();
CookieString = CookiePieces.join('\t\t');
CookieString = escape(CookieString);
document.cookie = CookieName + "=" + CookieString;
alert(nextpage);
location.href = nextpage;
return false;
} // function GoToURL()
//-->
</script>

In the JavaScript, you'll see two places to customize.

1. The form name. Between the quotation marks, put the name of the form (the "MyForm" in name="MyForm").

   The name may vary from form to form.

2. The cookie name. If you want the cookie name to be something other than MultiPageFormCookie, specify the preferred name between the quotation marks.

3. The cookie name must be identical for each page of the multi-page form.

Every page of the multi-page form needs to have this JavaScript. Paste it somewhere above the form.

Notes

To use these JavaScript and cookie multi-page forms, the browser must of course be JavaScript-enabled and allow cookies to be set.

If your form is too important to leave those details to chance, consider using Master Form V4. The software is quite sophisticated, with features including the ability to add form information to databases. It also has anti-hijacking code and the ability to block automatic form submissions (also known as "form spam").

Will Bontrager