Najprostszy sposób wyłączenia przycisku przy wysyłaniu formularza?

Question

Próbowałem znaleźć "właściwy" sposób, aby zapobiec podwójnemu złożeniu formularzy. Istnieje wiele powiązanych wpisów na SO, ale żadna z nich nie trafiła we mnie. Dwa pytania poniżej.

Oto moja forma

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

Oto moja pierwsza próba wyłączenia podwójne przedkłada:

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

Jest to podejście sugerowane tutaj: Disable button after post using JS/Jquery. Ten post sugeruje, że element przedkładający musi być wprowadzeniem, a nie przyciskiem, ale testowanie obu nie ma znaczenia. Możesz spróbować samemu używając tego skrzypka: http://jsfiddle.net/uT3hP/

Jak widać, wyłącza to przycisk, ale uniemożliwia również przesłanie formularza. W przypadkach, w których elementem przesyłającym jest przycisk i element wejściowy.

Pytanie 1: dlaczego ta funkcja obsługi kliknięć przerywa przesyłanie formularza?

wyszukiwanie wokół kilka znajdę tego rozwiązania (od 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; 
} 

Można grać za pomocą tego skrzypce: http://jsfiddle.net/uT3hP/1/

To działa, ale ...

Pytanie 2: Czy to jest najlepsze, co możemy zrobić?

Myślałem, że to będzie elementarne. Podejście 1 nie działa, podejście 2 ma, ale nie podoba mi się to i sens musi być prostszy.

Answer 1

Możesz użyć jQuery's submit(). W tym przypadku powinno to wyglądać mniej więcej tak:

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

Oto pracuje jsFiddle (wykonany przez Mike) - http://jsfiddle.net/gKFLG/1/.

Jeśli przesłać przycisk jest nie bezpośrednim dzieckiem formularzy elementu, który będzie musiał zastąpić children z find. Ponadto przycisk przesyłania może być również elementem button zamiast elementu input. Na przykład. Dzieje się tak, jeśli używasz Bootstrap horizontal forms.Poniżej znajduje się inna wersja tego fragmentu:

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

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

Answer 2

Można spróbować użyć następującego kodu:

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

Answer 3

To powinno pomóc:

<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

Proste i skuteczne rozwiązanie jest

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

Źródło: here

Answer 5

Podobnie Widziałem kilka przykładów, ten pozwala na zmianę, jak długo przycisk jest wyłączony za pośrednictwem timeout. Występuje również tylko w przypadku przesyłania formularza, a nie w przypadku zdarzenia kliknięcia przycisków, co początkowo spowodowało kilka problemów.

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

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