防止多个表单提交

Question

我使用JQuery和绑定到div (不是输入字段)的事件侦听器提交表单，并试图防止多次提交，这样客户就不会多收费用。我试图通过删除单击的div的submit-button类来实现这一点，因此下次用户单击它时，JQuery将不会侦听与防止多个提交的submit-button关联的事件。

然而，由于某种原因，使用下面的实现并不能阻止多个提交。

HTML

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

JQuery

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

注意:我必须坚持使用上述html的解决方案，因此使用submit类型的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

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

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

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

    submitted = true;
});

我省略了这个例子的表单验证。