Rimbalza i clic quando si invia un modulo web

Question

Un sistema back-end mal scritto con cui ci interfacciamo ha problemi a gestire il carico che stiamo producendo.Mentre risolvono i problemi di caricamento, stiamo cercando di ridurre qualsiasi carico aggiuntivo che stiamo generando, uno dei quali è che il sistema back-end continua a provare a servire l'invio di un modulo anche se un altro invio proviene dallo stesso utente.

Una cosa che abbiamo notato è che gli utenti fanno doppio clic sul pulsante di invio del modulo.Devo eliminare questi clic e impedire l'invio di un secondo modulo.
Il mio approccio (utilizzando Prototype) pone un onSubmit sul modulo che chiama la seguente funzione che nasconde il pulsante di invio del modulo e visualizza un "caricamento in corso..." div.

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

Il problema che ho riscontrato con questo approccio è che se utilizzo una gif animata nella sezione "caricamento..." div, si carica correttamente ma non si anima durante l'invio del modulo.

Esiste un modo migliore per eseguire questo rimbalzo e continuare a mostrare l'animazione sulla pagina mentre si attende che il risultato del modulo venga (finalmente) caricato?­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

Answer 1

Se hai jQuery a portata di mano, allega un evento click() che disabilita il pulsante dopo l'invio iniziale -

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

questo genere di cose.

Answer 2

Usando Prototype, puoi usare questo codice per vedere se qualche modulo è stato inviato e disabilitare tutti i pulsanti di invio quando lo fa:

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
        } );
    } );
} );

Questo dovrebbe aiutare gli utenti che fanno doppio clic sui pulsanti di invio.Sarà comunque possibile inviare il modulo in altre modalità (es.premendo Invio nel campo di testo).Per evitare ciò, devi iniziare a controllare l'invio di qualsiasi modulo dopo il primo e interromperlo:

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

Tutti i buoni suggerimenti sopra.Se vuoi davvero "rimbalzare" come dici tu, allora ho un'ottima funzione per questo.Maggiori dettagli su 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

Potresti provare a impostare il flag "disabled" sull'elemento input (type=submit), invece di cambiare semplicemente lo stile.Ciò dovrebbe chiudere completamente il lato browser.

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

Answer 5

Invia il modulo con AJAX e la GIF si animerà.