Demo

Download

Usage

HTML

Your HTML needs little change in order for Promin to work. That means your form will still work if Promin does not for whatever reason.

All you have to do is add the pm-step class to each step, like so:

<form>
    <div class="pm-step">
        <input name="name" />
    </div>

    <div class="pm-step">
        <input name="email" />
    </div>

    <div class="pm-step">
        <textarea name="message"></textarea>
    </div>
</form>

JavaScript

$('#form').promin(options);

Options

Actions

options.actions = {
    /*
    submit: 'default' // Submit form normally
    submit: 'ajax'    // Submit form via AJAX
    submit: false     // Do nothing (use event handler)
    */

    submit: 'default'
};

Events

options.events = {
    /*
    Returning false on any of these events will
    cancel the operation.

    i: the current field index
    fields: list of all fields
    */

    // Called after the field index has changed
    change: function(i) {},

    // Called after .promin('next') is called
    next: function(i) {},

    // Called after .promin('previous') is called
    previous: function(i) {},

    // Called when the form is being submit
    submit: function(fields) {},

    // Called after .promin('reset') is called
    reset: function() {}
};

Shortcuts

options.shortcuts = {
    /*
    Each shortcut (next, previous or reset) consists of an array of shortcuts.
    One shortcut can need multiple keys, defined as an array.

    next: [
        9,       // tab
        13,      // return/enter
        [13, 17] // enter + ctrl
    ]

    Note that are different keys are set in $.promin.key as listed below
    */

    next:     [ $.promin.key.tab, $.promin.key.enter ],   // tab or enter
    previous: [[ $.promin.key.tab, $.promin.key.shift ]], // tab and shift
    reset:    [ $.promin.key.escape ]                     // escape
};

/*

$.promin.key = {
    backspace: 8,
    tab: 9,
    enter: 13, // alias for return
    return: 13,
    shift: 16,
    ctrl: 17,
    alt: 18,
    caps: 20,
    escape: 27,
    space: 32,
    pageup: 33,
    pagedown: 34,
    end: 35,
    home: 36,
    left: 37,
    up: 38,
    right: 39,
    down: 40,
    del: 46
}

*/

AJAX callback

options.ajaxCallback = function(data) {
    // data: Contents of requested page
};

Methods

$('#form').promin('next');     // Move form one step behind
$('#form').promin('previous'); // Move form one step ahead
$('#form').promin('show', i);  // Show specific field 

$('#form').promin('reset');    // Reset and rewind the form
$('#form').promin('submit');   // Submit form manually

Promin