在提交時使用JavaScript禁用表單，以防止重復提交

Question

我想在表單提交后將其禁用，以防止重復提交。 我認為這是非常標准的用例，但是我可以發現那里的所有示例都是有缺陷的。

我能找到的所有內容都是基於禁用“提交”按鈕的，但這並不能防止如果用戶單擊表單上的Enter鍵，則無法重新提交表單，這是一種非常常見的方法。

我正在考慮修改現有的腳本之一以解決此問題，但是在我重新發明輪子之前，是否有人知道一個可以正確處理並可以共享的腳本？ 我真的很驚訝，似乎還沒有任何東西。

Answer 1

您可以創建一個布爾變量（或具有布爾成員變量的對象），並且僅在變量為false時才提交表單。 就像是：

function init() {
    var submit = false;
    var f = document.getElementById("FormID");
    f.onsubmit = function() {
        if(submit) {
            return false;
        } else {
            submit = true;
            return true;
        }
    }
}

當然，您必須在頁面加載后調用init ，無論選擇哪種方式（ window.onload = ... ， window.addEventListener(...) ， window.attachEvent(...)等）。

Answer 2

http://jsfiddle.net/c2N4v/

var sent = false;
$('#form').submit(function(e) {
    if (!sent) {
        sent = true;
        // do whatever
    }
    else e.preventDefault();
});

Answer 3

我嘗試了很多解決方案，但沒有一個對我有用。 我用了這個，它真的很好用：

jQuery的

<script>
$(document).ready(function(){
  $('#buttonSubmit').click(function() {
    if ($('#frm-confirm').attr('submitted')){
        event.preventDefault();
    } else {
        $('#frm-confirm').attr('submitted',true);
    }
  });
});
</script>

HTML / PHP

<form id="frm-confirm" action="" method="post">
    <input id="amount" name="amount" value="<?php echo round($_POST['amount'],2); ?>" type="hidden" />
    <input id="order_id" name="order_id" value="<?php echo htmlspecialchars($_POST['order_id']);?>" type="hidden" />
    <input type="submit" id="buttonSubmit" name="confirm" value="Confirm" />
</form>