Skip to content
A form wizard plugin for when next step is gotten via AJAX based on user's input
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist Serializing form properly (IE 9 bugfix) Jul 23, 2014
src
.gitignore
.jshintrc
CONTRIBUTING.md
LICENSE
README.md
ajaxWizard.jquery.json
bower.json
gulpfile.js Plugin creation Jul 3, 2014
package.json

README.md

jQuery Ajax Wizard

A form wizard plugin for when next step is gotten via AJAX based on user's input.

When to use

You have a multi steps form but just know the first step, the further steps rely on user's input. When user fills up first step and goes forward, an AJAX request is made posting user's input and next step is filled with the returned HTML.

A hash from each step is generated, so, a new AJAX request only is made to a already gotten step (in case of regression) if some data has been changed.

Usage

1- Include jQuery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

2- Download plugin (bower install jquery-ajaxWizard) and include it:

<script src="dist/jquery.ajaxWizard.min.js"></script>

3- Call the plugin:

<form id="my-form">
  <fieldset>
    <input type="text" name="name" class="required"/>
    <a href="javascript:void(0)" class="custom-forward-selector">forward</a>
  </fieldset>
  <!-- jQuery Ajax Wizard will place the returned HTML from AJAX in further fieldsteps -->
</form>
$("#my-form").ajaxWizard({
  // options and callbacks
});

Options and Callbacks

Here's a list of available options and callbacks.

$("#my-form").ajaxWizard({
  contentUrl: '/my/api/url',
  beforeForward: function(form){
    // validates form with jQuery Validation plugin before forward
    return $(form).valid();
  },
  controlSelectors: {
    forward:  '.custom-forward-selector',
    backward: '.custom-backward-selector'
  }
});
Attribute Type Required Description
contentUrl String yes Url for AJAX submission.
forward String no jQuery compatible selector.
backward String no jQuery compatible selector.
beforeForward Function no Before forward callback. It must return true to continue.
afterForward Function no After forward callback. Fired after a new AJAX request (when current step not yet cached or when data has been changed).
afterCachedForward Function no After forward callback. Fired after a cached step be displayed (no AJAX request).
beforeBackward Function no Before backward callback. It must return true to continue.
afterBackward Function no After backward callback.

Contributing

Check CONTRIBUTING.md for more information.

License

This projected is licensed under the terms of the MIT license.

You can’t perform that action at this time.