jquery-safeform

jQuery plugin to preven multiple form submission.

Installation

bower install jq-safeform --save-dev

Using jquery.safeform.js

To enable the safeform via javascript:

$('#example').safeform(options)

Options

Methods

$().safeform(options)

Attaches a safeform plugin to an element collection.

$('#example').safeform({
    timeout: 2000,
    submit: function(event) { 
        var $form = $(this);
        return false;
    }
})

.safeform('complete')

Completes a form submission, that means that form will be re-enabled and ready for next submission tour.

$('#example').safeform('complete')

.safeform('disable')

Manually disable a form (ignore submit events). If timeout is set, form will be re-enabled after this timeout.

$('#example').safeform('disable')

.safeform('submit')

It's just alias for $().submit().

$('#example').safeform('submit')

Examples

Imagine next simple form:

<form id="example" action="/post">
    <input id="firsname" name="firsname" type="text" />
    <input type="submit" onclick="$('#example').submit(); return false;"/>
</form>

1. Prevent double submission

$('#example').safeform({
    submit: function() {
        // put here validation and ajax stuff...
        return false;
    }
})

2. Submission with timeout

$('#example').safeform({
    timeout: 5000, // 5 sec.
    submit: function() {
        // put here validation and ajax stuff...
        return false;
    }
})

3. Manually re-enable the form (maybe when some event is happened)

$('#example').safeform({
    submit: function() {
        // put here validation and ajax stuff...

        //so all done, we ready for next submission
        $(this).safeform('complete');
        return false;
    }
})

4. Combining both methods to save user experience and re-enable form ASAP

$('#example').safeform({
    timeout: 5000,
    submit: function() {
        // put here validation and ajax stuff...
            
        // no need to wait for timeout, re-enable the form ASAP
        $(this).safeform('complete');
        return false;
    }
})

Authors

• Maxim Kamenkov (@caxap)