View on GitHub

Paulzi Form

JavaScript form helpers

Download this project as a .zip file Download this project as a tar.gz file

PaulZi Form module

Html5 form* attributes polyfill

Use form, formaction, formenctype, formmethod, formtarget attributes! This script will provide support for older browsers.

Form 1
Form 2
No form

Show source

Changing the behavior of all forms

When form is submitting, it has class form-loading. Until a response is received, the form can not be submit again. If you do not want to block resending form, add the class form-no-block.

Form
Ajax Form

Show source

Do not send empty fields

Just add a class form-no-empty to form.

Form

checkbox
no-value
value1
value2

Show source

Ajax form send

Provides submit the form via ajax. It supports the transfer of the name active submitting button and <input type="image"> x, y parameters. Also support html5 form* attributes for override form action and method.

Form 3


Form 4
No form

Show source

For use, add class form-ajax to form and add <output> or <* class="form-output"> tag in form. You can use data-form-output attribute for find output element globally in document.

If you specify a class form-replace to root element of response, the form will replace by contents. You can also specify data-form-output attribute in root element of response to override the output element.

If the root element has class alert, it we automate make alert-dismissible if bootstrap javascript is included on page.

Form
External output default
External output 2

Show source

Response must return correct content-type text/html for append to output, otherwise it can be handled only by JavaScript.

Generate events:

All defined in the script event behavior can be canceled by preventDefault().

Form
Log

                    

Show source

At event formajaxdone, when the content is added to the output, for form generated two events for initialize JavaScript components in new content:

Through this, you can initialize all JavaScript components such as page load, and when Ajax loading. Simple use:

$(function () {
    $(document).trigger('contentinit', [$(document)]);
});
$(document).on('contentinit', function (e, cont) {
    cont.find('.datepicker').datepicker();
});
Form
Log
On page datepicker:

Show source

Ajax form with files

With jQuery Form plugin (https://github.com/malsup/form/) you can send files with fallback for browsers, not supported XMLHttpRequest Level 2.

For use, simply specify enctype="multipart/form-data" and include jQuery Form plug-in on page, the script will automatically detect that you want to use this plug-in.

Additionally, sent parameter X-Requested-With with value XMLHttpRequest, for detect iframe method of form submit.

Generates additional events:

Note: the transfer form is through a malsup plugin, so support html5 form attributes and pass the name of the active submit button depends of the support of these features by this plugin. While it is not.

Form
Log

                    

Show source

Redirect after AJAX

Set X-Redirect header in response for redirect page. You can stop redirect, if preventDefault() in formajaxdone or formajaxfail events.

Form

Show source

No ajax button

If you want to submit a form normally, but only some buttons, add btn-no-ajax class to this buttons.

Form

Show source

Change status of submit button

Add class .btn-loading to submit button. When the button is pressed, it changes the status to disabled automatically, and restores the status only after receiving the AJAX response.

Add class .btn-submit-default to submit button, then it will be used as the target of a form submit from the keyboard.

If you add the attribute data-loading-icon, during the process form sending, the button prepended icon. Icon realized by <i> tag with specified classes in attribute.

Example:

<!-- font awesome -->
<button type="submit" class="btn btn-primary btn-loading" data-loading-icon="fa fa-refresh fa-spin">Submit</button>

<!-- bootstrap glyph -->
<button type="submit" class="btn btn-primary btn-loading" data-loading-icon="glyphicon glyphicon-refresh">Submit</button>

If you add the attribute data-loading-text, during the process form sending, the button text changes to the specified in attribute.

Form
(try to submit the form by pressing ENTER on the keyboard)

Show source

Form alerts

Use $.formAlert(elem, type, isJquery) for add the bootstrap alert to form output.

Form
Alert test

Show source