Skip to content
/ wizardize Public

jQuery plugin to break a form up into pages based on the "fieldsets"

Notifications You must be signed in to change notification settings

ndp/wizardize

Repository files navigation

Welcome to Wizardize

This plugin takes a regular form and creates separate panels out of it based
on the fieldsets included in the page.

  • hides all but the first page
  • adds a list of “status buttons” as the first element in the form. Style as
    you see appropriate (or "form ol:first-child { display: none})
  • adds “next” and “previous” buttons to each panel
  • The regular submit button for the form is moved to the last panel.

That’s about it.

Getting Started

1. Download the code from

http://github.com/ndp/wizardize/raw/master/public/javascripts/jquery/jquery.wizardize.js

2. Include it in your page

3. Create a form with fieldsets separating out the different panels

4. Wizardize!

$(‘form’).wizardize();

Options

wizardize accepts an options hash. All values are optional:

  • statusButtonsTemplate: how the status buttons are named. Supports simple
    variable substitution: ‘$TITLE’ is the title tag of the fieldset, “$#” is
    the index of the fieldset. Therefore, to generate status buttons like
    “Step 3: provide your credentials”, use “Step $#: $TITLE
  • statusButtonsSpacer: any html to add between the generated status buttons
    by default the status buttons are just an ordered list of the names of
    the panels
  • nextButton: name of the next button added to each panel. Defaults to ‘Next’.
  • prevButton: name of the previous button added to each panel. ‘Previous’,
  • nextCallback: function to be called when the user goes to the next panel

Development

Run tests using:

rake spec:javascript

About

jQuery plugin to break a form up into pages based on the "fieldsets"

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published