Deactivate clicks when submitting a web form

Question

A poorly written internal system that we interact with has problems handling the load we produce. Although they fix the load problems, we are trying to reduce any additional load that we generate, one of which is that the internal system continues to try to service the form submission, even if the other submission comes from the same user.

We noticed that users double-click on the form submit button. I need to disable these clicks and prevent the submission of the second form.
My approach (using Prototype) is putting onSubmitin a form that calls the following function, which hides the submit button of the form and displays "loading ..." div.

function disableSubmit(id1, id2) {
    $(id1).style.display = 'none';
    $(id2).style.display = 'inline';
}

The problem I found with this approach is that if I use an animated gif in "loading ..." div, it loads normally, but doesn’t enliven while the form is submitting.

Is there a better way to do this debacking and continue showing the animation on the page, waiting for the form result (finally)?

Answer 1

jQuery, click(), -

$('input[type="submit"]').click(function(event){
 event.preventDefault();
 this.click(null);
});

.

Answer 2

Prototype, , , - ​​ , :

document.observe( 'dom:loaded', function() { // when document is loaded
    $$( 'form' ).each( function( form ) { // find all FORM elements in the document
        form.observe( 'submit', function() {  // when any form is submitted
            $$( 'input[type="submit"]' ).invoke( 'disable' );  // disable all submit buttons
        } );
    } );
} );

, . , (, Enter ). , :

document.observe( 'dom:loaded', function() {
    $$( 'form' ).each( function( form ) {
        form.observe( 'submit', function() {
            $$( 'input[type="submit"]' ).invoke( 'disable' );
            $$( 'form' ).observe( 'submit', function( evt ) { // once any form is submitted
                evt.stop(); // prevent any other form submission
            } );
        } );
    } );
} );

Answer 3

. "", , . unscriptable.com

var debounce = function (func, threshold, execAsap) {

    var timeout;

    return function debounced () {
        var obj = this, args = arguments;
        function delayed () {
            if (!execAsap)
                func.apply(obj, args);
            timeout = null; 
        };

        if (timeout)
            clearTimeout(timeout);
        else if (execAsap)
            func.apply(obj, args);

        timeout = setTimeout(delayed, threshold || 100); 
    };

}

Answer 4

You can try setting the "disabled" flag on the input element (type = submit), rather than just changing the style. This should completely disconnect from the browser.

See: http://www.prototypejs.org/api/form/element#method-disable

Answer 5

Submit the form using AJAX and the GIF will animate.