javascript - 防止多个表单提交

Question

我正在使用 JQuery 和绑定到 div（不是输入字段）的事件侦听器提交表单，并且我试图防止多次提交，因此客户不会被多收费用。我试图通过删除submit-button单击的 div 的类来完成此操作，因此下次用户单击它时，JQuery 将不会监听与submit-button阻止多次提交相关的事件。

然而，出于某种原因，使用下面的实现并不能按预期阻止多次提交。

HTML

<div class="submit-button button-style">Submit</div>

jQuery

$(".submit-button").click(function(){
    $(this).removeClass("submit-button");
    //**submit form**
});

注意：我必须坚持使用上述 html 的解决方案，因此使用inputtype 元素的解决方案submit将没有用。

我感谢有关如何使这项工作的任何建议。提前谢谢了！

Answer 1

您可以使用.one()来防止它多次触发 -

$(".submit-button").one('click',function(){
    //**submit form**
});

http://api.jquery.com/one/

编辑 ：

如果出现错误：

function submitForm(){
    //**submit form**
   $.post('submit.php').error(function(){
        // rebind event on error
        $(".submit-button").one('click',submitForm);
   });
}
$(".submit-button").one('click',submitForm);

Answer 2

你可以使用类似的东西：

$('something').one('click', function(){
   // submit code
});

只会触发一次。

Answer 3

很大一部分用户不会费心点击提交按钮来提交表单 - 还有其他更方便的方法，例如当光标焦点位于表单字段上时按 Enter 键。

更健壮的方法是通过表单提交事件来阻止表单，并维护一个变量来跟踪表单提交状态。

var submitted = false;
$("form#myForm").submit(function(evt){
    if (submitted) {
        evt.preventDefault();//stops form submission
        return;
    }

    submitted = true;
});

我省略了此示例的表单验证。