Promin : jQuery plugin to boost your HTML forms Looks

Download   Demo

A jQuery plugin to boost your HTML forms to level awesome!

By presenting the form in chunks, it will consume less space, look better and improves a user’s experience.

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 <i>

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

Promin : jQuery plugin to boost your HTML forms Looks