Use blockUI.js to Disable User Input Upon Form Submission

I wanted to block user access to a form's submit button upon submission to prevent user from submitting more than once. I then decided that it would be a good idea to not only block access to the submit button, but the whole form. I used the jQuery blockUI plug-in to accomplish this.

Load jQuery and the blockUI plug-in. I like loading JavaScript files at the bottom of the page, just before the closing body tag (for performance reasons):

    ...
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery.blockUI/2.66.0-2013.10.09/jquery.blockUI.min.js"></script>;
</body>

Now, in order to block user access to the form, we must intercept the normal submission process, block the form, and then allow the submission process to continue:

$(function() {
    /**
     * Disable form upon submission to prevent
     * user from submitting more than once.
     */
    $('button[type=submit]').click(function() {
        $(this).parents('form').block({ message: null, overlayCSS:  { backgroundColor: 'transparent' } });
        $(this).parents('form').submit();
    });
});

In the code above, a couple of options are used to make the operation seamless:

message: null => Do not display any message while the form is being submitted.

overlayCSS: { backgroundColor: 'transparent' } => Make overlay transparent so it's invisible while the form is being submitted.

For the full range of options in this plug-in, visit the blockUI.js site and have fun with it.