HOW-TO Create a Basic Form Wizard using JQuery Form-Wizard-Plugin

Owned by Harsha Siriwardena
Last updated: May 26, 2012Version comment
2 min read

There are many JQuery Form Wizard Plugins available on the web. But note that JQuery.com still didn't got an official Jquery-Form-Wizard plugin yet. So after searching for many of the Jquery-Form-Wizard plugins, I note that plugin from thecodemine.org is the best one for use. I will guide you how to use it and create really cool Form Wizards using this Jquery plugin in the rest of this document.

FormWizard

FormWizard is a jQuery plugin which turns a regular HTML form into a wizard with very little effort.

The plugin supports AJAX form submission, form validation and browser back and forward buttons, all through integration with the following jQuery plugins:

  • jQuery form
  • jQuery validation
  • BBQ plugin

Features

  • Built on top of jQuery UI for flexible theming
  • Divides a single form into different steps to simulate a flow of steps rather than one big form.
  • Supports different routes to be taken in the form, depending on user input.
  • Submits only input fields located on visited steps in the form.
  • Supports multiple "submit"-steps
  • Supports both back and forward navigation.
  • Supports the usage of browser back- and forward-buttons through integration with the jQuery BBQ: Back Button & Query Library plugin
  • Supports client-side validation through integration with the jQuery validation plugin
  • Supports posting the form using AJAX through integration with the jQuery.form plugin
  • Integrated plugins are fully configurable, providing e.g. possibility for localization, extra validation rules and custom callbacks used during the AJAX-request.

Compatibility

This will be updated as more testing is completed

  • Firefox 3.5
  • Chrome

Usage

Be sure to have the correct includes obviously.

  • jquery-1.4.2.min.js or jquery-1.4.4.min.js
  • jquery.form.js
  • jquery.validate.js
  • bbq.js
  • jquery-ui-1.8.5.custom.min.js

Example usage. This is a very simple setup.

$(function() {
$("#demoForm").formwizard({
formPluginEnabled: true,
validationEnabled: true,
focusFirstInput : true,
formOptions : {
success: function(data) {
$("#status").fadeTo(500,1,function(){
                    $(this).html("You are now registered!").fadeTo(5000, 0);
                })
},
beforeSubmit: function(data){
                $("#data").html("data sent to the server: " + $.param(data));
            },
dataType: 'json',
resetForm: true
}
});
});

Demo with Source Code

References

For more info visit : http://thecodemine.org/