New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
Categories
Other Sections
Sweet Ads
Compatibility
  • IE5+: IE 5 and above
  • FF1+: Firefox 1.0+. NS6+ and FF beta are assumed as well.
  • Opr7+: Opera 7 and above.
Bookmark online:
FF1+ IE6+ Opera 8+

jQuery Form to Form Wizard (v1.1)

Author: Dynamic Drive

Oct 21st, 10': Script updated to v1.1, which adds basic form validation functionality, triggered each time the user goes from one page to the next, or tries to submit the form.

Description: This powerful jQuery script turns a FORM into a multi-step FORM wizard! Simply group logical elements within your FORM by surrounding them with the FIELDSET element, and the script does the rest in creating a new page for each group, plus the appropriate "Steps" text and pagination links above and below the form. It helps make filling out long forms more intuitive and less daunting. And when it comes to form validation, fear not, a built in form validation feature plus two event handlers, oninit and onpagechangestart of the script make it possible to perform form validation on each form page easily before allowing the user to move on to the next page.

The only requirement to using this script on a form is that you have access to the FORM's HTML markup in order to inject a FIELDSET element in the desired locations.

Demos:

Basic Information Name:

Age:

Sex: Male Female
Shipping Address Country:

State/Province:

Address #1:

Address #2:

Comments Any additional instructions:
Biography
Name *:
Age:
Sex: *:
Male Female
Billing Address
Country:
State/Province:
Address #1*:
Address #2:
Shipping method *:
Past Experiences
Please enter any past experiences *:


Above form makes use of the built in form validation feature (in v1.1) to specify that certain form fields must be filled out before he/she can go on to the next page or submit the form.

Directions: Developer's View

Step 1: Add the below script to the <HEAD> section of your page:

Select All

The above references the following two external files, which you should download (right click, and select "Save As")

Step 2: Then, insert the below HTML code onto your page, which contains the HTML markup of a single form with fieldset elements grouping logical form elements together:

Select All

And that's a wrap for installation, but read on to get all the important details on customizing the script.

Preparing your form to be transformed into a form wizard

The way to turn your form into a form wizard is to edit the form's HTML markup to wrap each "page" of form elements manually with a <FIELDSET class="sectionwrap"> element. The script creates a new page out of each of these FIELDSET elements automatically. The following is an arbitrary form, with the changes shown in red that turn the form into a form wizard:

<form id="feedbackform">

<fieldset class="sectionwrap">
<legend>Basic Information</legend>
Name: <input type="text" /><br />
Age: <input type="text" /><br />
sex: <input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" /> Female
</fieldset>

<fieldset class="sectionwrap">
<legend>Shipping Address</legend>
Country: <input type="text" /><br />
State/Province: <input type="text" /><br />
Address: <input type="text" /><br />
</fieldset>

<fieldset class="sectionwrap">
<legend>Additional Comments</legend>
Feedback: <textarea></textarea>
</fieldset>

</form>

The changes you should make to the form are:

  • Make sure the <form> element carries an ID or Name attribute (either will do) to identify it using.

  • Group each logical "page" of form elements by surrounding them with a <fieldset class="sectionwrap"> tag.

  • Define a <legend> element inside <fieldset> to act as the title of the page in question, to be used as part of the auto generated "Steps" text shown at the top of the form.

  • Call function new formtowizard() on this form to initialize it.

formtowizard() initialization function

You need to call the formtowizard() function in the HEAD section of your page to initialize the script on the form in question. Its syntax is:

var uniquevar=new formtowizard(options)

where "uniquevar" should be an arbitrary but unique variable name assigned to this instance of form wizard, and options is an JavaScript object containing the settings for it. An example would be:

<script type="text/javascript">
var myform=new formtowizard({
 formid: 'feedbackform',
 persistsection: true,
 revealfx: ['slide', 500] //<--no comma after last setting
})
</script>

The following lists the possible setting values:

option Description
formid

Required

 The ID or NAME of the form you wish to turn into a form wizard. Either of these attribute values will work, for example:

<form id="feedbackform">
"
</form>

or:

<form name="feedbackform">
"
</form>
persistsection

defaults to false

 Boolean that sets whether the script should persist the last form "page" the user is on within a browser session, and recall it upon the user's return. Defaults to false. For example:

var myform=new formtowizard({
 formid: 'feedbackform',
 persistsection: true //<--no comma after last setting
})
revealfx

defaults to ["slide", 500]

Sets the effect used to bring each page into view. The syntax is: ["effectname", milliseconds], where "effectname" can be one of the the following three values:

  • "none": No effect applied.

  • "slide": Each page is slid into view like a scroll.

  • "fade": Each page is faded into view.

For example:

var myform=new formtowizard({
 formid: 'feedbackform',
 persistsection: false,
 revealfx: ["fade", 1000] //<--no comma after last setting
})

This sets the reveal effect to "fade" and for 1 second (1000 milliseconds) each time.
validate v1.1 feature

defaults to null

 An optional array of the IDs or names of the form fields within the form that you wish the script to automatically validate. The script will check to see if these fields are filled out before allowing the user to proceed to the next form page or submit the form. For example:

var myform=new formtowizard({
 formid: 'feedbackform',
 persistsection: false,
 validate: ['username', 'address', 'feedback'],
 revealfx: ["fade", 1000] //<--no comma after last setting
})

More information below on how to use the validate array here.
oninit:function(){}

defaults to empty function

This event handler is fired once when the script has finished initializing a form and transformed it into a form wizard. This usually happens before the page itself has finished loading. The event is passed three parameters:

  1. $: A shorthand reference to the main jQuery object for your convenience.
  2. i: The page number of the currently shown form page, where 0=1st page, 1=2nd page etc. If you do not have persistence of last page enabled, this value will always be 0; otherwise, it will be the page number of the recalled and currently shown page.
  3. $fieldset: A jquery object referencing the fieldset that wraps around all the form elements of the current page. You can reference the first INPUT element of the current page for example using the syntax $fieldset.find(“input:eq(0)”) See jQuery selectors for more info.
See "Form Validation using the oninit() and onpagechangestart() event handlers" for more info on its usage.
onpagechangestart:function(){}

defaults to empty function

This event handler is fired each time the user is about to go from one form page to another, such as when the user has filled out the first page and clicks "next”" to proceed to the 2nd. The event is also passed three parameters:

  1. $: A shorthand reference to the main jQuery object for your convenience.
  2. i: The page number of the currently shown form page, where 0=1st page, 1=2nd page etc. If you do not have persistence of last page enabled, this value will always be 0; otherwise, it will be the page number of the recalled and currently shown page.
  3. $fieldset: A jquery object referencing the fieldset that wraps around all the form elements of the current page. You can reference the first INPUT element of the current page for example using the syntax $fieldset.find(“input:eq(0)”) See jQuery selectors for more info.
See "Form Validation using the oninit() and onpagechangestart() event handlers" for more info on its usage.

Using Form Wizard's built-in form validation feature

When it comes to form validation, most of the time, you just want to ensure that certain fields are filled out. This script rolls into it a simple form validation feature that does that and with ease. Simply ensure all of the form fields you wish to validate carry either an id or name attribute to help identify them, for example:

<form id="staff_feedbackform">

<fieldset class="sectionwrap">
<legend>Basic Information</legend>
Name:<br /> <input id="staff_username" type="text" size="35" /><br />
Age:<br /> <input id="staff_age" type="text" size="6" /><br />
Sex: <input type="radio" name="staff_sex" value="male" /> Male <input type="radio" name="staff_sex" value="female" /> Female
</fieldset>

<fieldset class="sectionwrap">
<legend>Shipping Address</legend>
Country:<br /> <input id="staff_country" type="text" size="35" /><br />
State/Province:<br /> <input id="staff_state" type="text" size="35" /><br />
Address #1:<br /> <input id="staff_addr1" type="text" size="35" /><br />
Address #2:<br /> <input id="staff_addr2" type="text" size="35" /><br />
</fieldset>

<fieldset class="sectionwrap">
<legend>Comments</legend>
Any additional instructions:<br /> <textarea id="staff_feedback" style="width:350px;height:150px"></textarea><br />
<input type="submit" />
</fieldset>

</form>

Then inside the intialization code for the form, define the validate option with the ids/names of the form fields you wish the script to check for:

<script type="text/javascript">
var myform3=new formtowizard({
 formid: 'staff_feedbackform',
 validate: ['staff_username', 'staff_sex', 'staff_addr1'],
 revealfx: ['slide', 500] //<--no comma after last setting
})
</script>

The result is that the form fields "username", "sex", and "addr1" will now be checked to ensure they are not empty before the user can move on to the next page or actually submit the form:

Basic Information Name (required):

Age:

Sex (required): Male Female
Shipping Address Country:

State/Province:

Address #1 (required):

Address #2:

Comments Any additional instructions:

The built in form validation works instantly and painlessly. However, by default it only checks if the fields in question contain any data. For more refined validation that check form fields for certain types of data, you need to turn to the oninit() and onpagechangestart() event handlers for the task. That's explained on the next page.

Table Of Contents