Il modo più semplice per disabilitare il pulsante all'invio di un modulo?

Question

Ho cercato di trovare il modo "giusto" per evitare il doppio invio di moduli. Ci sono molti post correlati su SO ma nessuno di loro ha colpito il posto per me. Due domande qui sotto

Qui è la mia forma

<form method="POST"> 
    <input type="text" name="q"/> 
    <button class="once-only">Send</button> 
</form> 

Ecco il mio primo tentativo di disabilitare doppie sottomette:

$(document).ready(function(){ 
    $(".once-only").click(function(){ 
     this.disabled = true; 
     return true; 
    }); 
}); 

Questo è l'approccio suggerito qui: Disable button after post using JS/Jquery. Questo post suggerisce che l'elemento di presentazione deve essere un input piuttosto che un pulsante, ma il test di entrambi non fa differenza. Puoi provarlo tu stesso usando questo violino: http://jsfiddle.net/uT3hP/

Come puoi vedere, questo disabilita il pulsante, ma impedisce anche l'invio del modulo. Nei casi in cui l'elemento di invio è un pulsante e un elemento di input.

Domanda 1: perché questo gestore di clic interrompe l'invio del modulo?

cercare in giro un po 'più trovo questa soluzione (da Why doesn't my form post when I disable the submit button to prevent double clicking?)

if($.data(this, 'clicked')){ 
    return false; 
} else{ 
    $.data(this, 'clicked', true); 
    return true; 
} 

Si può giocare con questo utilizzo di questo violino: http://jsfiddle.net/uT3hP/1/

Questo funziona, ma ...

Domanda 2: E 'questo il meglio che possiamo fare?

Ho pensato che sarebbe stata una cosa elementare. L'approccio 1 non funziona, l'approccio 2 sì, ma non mi piace e sento che ci deve essere un modo più semplice.

Answer 1

È possibile utilizzare jQuery's submit(). In questo caso, dovrebbe essere simile a questa:

$('form').submit(function(){ 
    $(this).children('input[type=submit]').prop('disabled', true); 
}); 

Ecco un jsFiddle lavoro (realizzato da Mike) - http://jsfiddle.net/gKFLG/1/.

Se il submit-pulsante è non figlio diretto della forma-elemento che sarà necessario sostituire children con find. Inoltre, il tuo pulsante di invio potrebbe anche essere un elemento button anziché un elemento input. Per esempio. Questo è il caso se si utilizza Bootstrap horizontal forms.Qui di seguito è una versione diversa del frammento:

$('form').submit(function(){ 
    $(this).find('button[type=submit]').prop('disabled', true); 
}); 

Demo jsFiddle - http://jsfiddle.net/devillers/fr7gmbcy/

Answer 2

Si potrebbe provare a utilizzare il seguente codice:

$(document).ready(function(){ 
    $(".once-only").click(function(){ 
     this.submit(); 
     this.disabled = true; 
     return true; 
    }); 
}); 

Answer 3

Questo dovrebbe aiutare:

<form class="form-once-only" method="POST"> 
    <input type="text" name="q"/> 
    <button type="submit" class="once-only">Send</button> 
</form> 

Javascript:

$(document).ready(function(){ 
    $("form.form-once-only").submit(function() { 
     $(this).find(':button').prop('disabled', true); 
    }); 
} 

Answer 4

soluzione semplice ed efficace è

<form ... onsubmit="myButton.disabled = true; return true;"> 
    ... 
    <input type="submit" name="myButton" value="Submit"> 
</form> 

Fonte: here

Answer 5

Allo stesso modo Ho visto alcuni esempi, questo permette di modificare quanto a lungo il pulsante è disabilitato per, tramite timeout. Inoltre, si attiva solo in caso di invio di un modulo piuttosto che in caso di clic sul pulsante, che in origine mi ha causato alcuni problemi.

$('form').submit(function() { 
     var button = $('#Button'); 
     var oldValue = button.value; 

     button.attr('disabled', true); 
     setTimeout(function() { 
      button.value = oldValue; 
      button.attr('disabled', false); 
     }, 3000) 
    });