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

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/