cliques Debounce quando submeter um formulário web

Question

Um sistema de back-end mal-escrito que a interface com está tendo problemas com o manuseio da carga estamos produzindo. Enquanto eles corrigir os seus problemas de carga, estamos tentando reduzir qualquer carga adicional que estamos gerando, uma das quais é que o sistema de back-end continua a tentar e serviço de um formulário, mesmo que outra submissão veio do mesmo usuário.

Uma coisa que notei é os usuários clicar duas vezes no botão de envio do formulário. Preciso de-saltar esses cliques, e evitar um segundo envio do formulário.
Minha abordagem (usando Prototype) coloca uma onSubmit no formulário que chama a seguinte função que oculta o botão de envio do formulário e exibe um "loading ..." div.

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

O problema que eu encontrei com esta abordagem é que se eu usar um GIF animado no div "loading ...", ele carrega bem, mas não animado enquanto a forma está submetendo.

Existe uma maneira melhor de fazer isso de-saltando e continuar a mostrar a animação na página enquanto aguarda o resultado de formulário para (finalmente) de carga?

Answer 1

Se você tem jQuery acessível, anexar um evento click () que desativa o botão após a apresentação inicial -

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

esse tipo de coisa.

Answer 2

Usando Prototype, você pode usar este código para ver se qualquer forma foi enviado e desativar botões tudo submeter quando ele faz:

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

Isso deve ajudar com os usuários que dê um duplo clique em enviar botões. No entanto, ainda será possível enviar o formulário de qualquer outra forma (por exemplo, pressionando Enter no campo de texto). Para evitar isso, você tem que começar a assistir para qualquer submissão do formulário após o primeiro e pará-lo:

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

Todas as boas sugestões acima. Se você realmente quer "debounce", como você diz, então eu tenho uma grande função para isso. Mais detalhes em 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

Você pode tentar definir a bandeira "desativado" na entrada (type = submit) elemento, ao invés de apenas mudando o estilo. Isso deve inteiramente desligar o de no lado do browser.

Veja: http://www.prototypejs.org/api/form / element # método disable

Answer 5

Envie o formulário com AJAX, eo GIF vai animar.