如何在多次點擊提交后只提交一次表單？

Question

我遇到的問題是，當我嘗試通過單擊提交按鈕提交表單時，在此期間發布請求需要一些時間，如果我再次單擊提交按鈕，它將再次發送所有參數，並且參數會保存兩次，三次……等等。

我不知道如何限制提交按鈕，這樣表單就不會被提交兩次。 我想當我點擊提交時，我必須禁用提交按鈕，這樣用戶就不能再次點擊它，這是正確的做法嗎？

Answer 1

禁用按鈕是一種解決方案，但可能會給只是按 Enter 鍵提交表單的鍵盤用戶帶來問題。 在這種情況下，按鈕不會被禁用。 萬無一失的方法是像這樣處理onsubmit事件：

(function () {
    var allowSubmit = true;
    frm.onsubmit = function () {
       if (allowSubmit)
           allowSubmit = false;
       else 
           return false;
    }
})();

（好吧，無論如何你都可以在啟用 JS 的情況下獲得）。 您可以禁用該按鈕，作為向最終用戶確認表單也只能提交一次的視覺確認。

Answer 2

<input type="submit" onclick="this.disabled = true" value="Save"/>

Answer 3

在 chrome 中使用這個：

<input type="submit" onclick="this.form.submit();this.disabled = true;" value="Save"/>

Answer 4

我喜歡Zoidberg 回答的簡單和直接。

但是，如果您想使用代碼而不是標記來連接該處理程序（有些人更喜歡將標記和代碼完全分開），這里使用的是Prototype ：

document.observe('dom:loaded', pageLoad);
function pageLoad() {
    var btn;

    btn = $('idOfButton'); // Or using other ways to get the button reference
    btn.observe('click', disableOnClick);
}
function disableOnClick() {
    this.disabled = true;
}

或者你可以使用匿名函數（我不喜歡它們）：

document.observe('dom:loaded', function() {
    var btn;

    btn = $('idOfButton'); // Or using other ways to get the button reference
    btn.observe('click', function() {
        this.disabled = true;
    });
});

使用jQuery做這件事看起來非常相似。

Answer 5

如果您正在使用帶有ujs的Rails，那么請查看http://api.rubyonrails.org/classes/ActionView/Helpers/FormTagHelper.html#method-i-submit_tag中的disable_with 。

Answer 6

我知道這是舊的，但與其禁用，不如隱藏按鈕，您無法單擊看不到的內容。

<input type="submit" onclick="this.style.visibility = 'hidden'" value="Save"/>

Answer 7

如果您在 PHP 中使用表單提交/發布，則使用此代碼

onclick="disableMe();" in type="submit" 

它的提交按鈕代碼

<input name="bt2" type="submit" onclick="disableMe();" id="bt2" style="width:50px;height:30px; margin-left:30px;" value="Select" />

Answer 8

我發現此方法最有效的最佳方法是，如果表單上的所有信息都正確，則將屬性添加到提交按鈕。 Incase用戶需要回來並用正確的信息再次填寫表格。

document.querySelector('.btn').addEventListener('submit',function(){
    if(input.value){
        this.setAttribute("disabled", "true")
    }
};

Answer 9

您可以將下一個腳本添加到您的“布局頁面”（在全局所有頁面上呈現）。

<script type="text/javascript">
    $(document).ready(function () {
        $(':submit').removeAttr('disabled'); //re-enable on document ready
    });
    $('form').submit(function () {
        $(':submit').attr('disabled', 'disabled'); //disable on any form submit
    });
</script>

然后，每次提交表單時，提交按鈕都會被禁用。 （加載頁面時重新啟用提交按鈕。）

如果您正在使用驗證框架（如 jQuery 驗證），則可能需要在驗證失敗時重新啟用提交按鈕。 （因為表單驗證失敗導致提交被取消）。

如果您使用 jQuery 驗證，您可以檢測表單失效（表單提交取消），添加以下內容：

$('form').bind('invalid-form.validate', function () {
    $(':submit').removeAttr('disabled'); //re-enable on form invalidation
});

然后，如果表單驗證失敗，則再次啟用提交按鈕。

Answer 10

一種解決方案是不使用<input>作為提交按鈕，而是使用樣式為按鈕的<div> （或<span> ），具有onclick屬性：

<form method="post" id="my-form">
  <input type="text" name="input1">
  <input type="text" name="input2">
  <input type="text" name="input3">

  ...

  <div class="button" id="submit-button" onclick="submitOnce()">
    Submit
  </div>
</form>

而submitOnce函數將首先刪除onclick屬性，然后提交表單：

function submitOnce() {
  document.getElementById('submit-button').removeAttribute('onclick');
  document.getElementById('my-form').submit();
}

Answer 11

您可以使用 this.once() 方法調用一次 function：

<form method="post" id="my-form">
  <input type="text" name="input1">
  <input type="text" name="input2">
  <input type="text" name="input3">

  ...

  <div class="button" id="submit-button" onclick.once="submitOnce()">
    Submit
  </div>
</form>