最簡單的方法來禁用按鈕提交表單？

Question

我一直在試圖找到防止雙重提交表單的「正確」方法。 SO上有很多相關的帖子，但沒有一個對我來說很重要。下面有兩個問題。

這裏是我的形式

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

這是我第一次禁止雙的提交嘗試：

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

這是建議的方法在這裏：Disable button after post using JS/Jquery。該帖子建議提交元素必須是輸入而不是按鈕，但測試兩者都沒有區別。你可以使用這個小提琴自己嘗試一下：http://jsfiddle.net/uT3hP/

正如你所看到的，這會禁用按鈕，但也會阻止提交表單。在提交元素是按鈕和輸入元素的情況下。

問題1：爲什麼這個click處理程序停止提交表單？

搜索周圍的一些更多的，我覺得這個解決方案（從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; 
} 

你可以利用這個使用這個小提琴演奏：http://jsfiddle.net/uT3hP/1/

這並不工作，但...

問題2：這是我們能做的最好的嗎？

我認爲這將是一件基本的事情。方法1不起作用，方法2起作用，但我不喜歡它，並且感覺必須有一個更簡單的方法。

Answer 1

您可以使用jQuery的submit()。在這種情況下，它應該是這個樣子：

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

這裏是一個工作的jsfiddle（由邁克） - http://jsfiddle.net/gKFLG/1/。

如果您的提交按鈕是不表單元素的直接孩子，你將需要find更換children。此外，您的提交按鈕也可以是button元素，而不是一個input元素。例如。如果您使用Bootstrap horizontal forms，則是這種情況。下面是一個不同版本的代碼段：

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

演示的jsfiddle - http://jsfiddle.net/devillers/fr7gmbcy/

Answer 2

你可以嘗試使用下面的代碼：

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

Answer 3

這應有助於：

<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

簡單而有效的解決方案是

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

來源：here

Answer 5

同樣我見過的幾個例子，這一個允許您更改按鈕多久是殘疾人，可以通過超時。它也只觸發表單提交而不是按鈕點擊事件，這最初引起了我幾個問題。

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

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

的[禁用提交表單按鈕提交]