Question

好吧，我花了好几个小时来解决这个问题并扫描整个stackoverflow，但仍然不知道该怎么做。但真正让我感到困惑的是，世界上这么简单和最简单的东西是行不通的。所以，我现在拥有的是带有输入和按钮的表单：

<form id="frm" action="/accent/login/enter/">
    {% csrf_token %}
    <div draggable="true" id="panel" class="panel" title="">
        <input id="login" name="login" type="text" placeholder="" class="required" /> <br/>
        <input id="pswd" name="pswd" type="password" placeholder="" class="required"  /> <br/>
        <button id="btn" value="">ENTER</button>            
    </div>
</form>

我有这个代码应该发送表单：

$('#btn').one("click",function(){  // prevent from multiple submits
    $('#frm').validate({ // validate the form before submission
        ...general stuff: rules, messages, etc
        submitHandler:function(form){
            $('#frm').submit(function(e){ //submitted on the second click. why???
                ...prepare parameters for ajax call
                $.ajax({
                    type:'POST',
                    ...general stuff
                });
                e.preventDefault();
            })
        }
    });
});

问题是，当用户第一次点击提交按钮时，表单未提交，但是，如果他或她第二次点击它，则提交确认。我无法理解jquery中实现的这种行为背后的逻辑。此外，我应该说，我尝试了很多其他技巧，比如：

form.submit(...
$('#frm')[0].submit(...

但是它们没有像预期的那样工作，好像没有回调函数 - 我被重定向到网址，但不会停留在同一页面上 - 正如我对e.preventDefault所期望的那样。我想在jquery中有一些神圣的方法或魔法属性，我应该用它来使它工作（比如方法one，它可以防止可怕的多次提交）。但此刻我不认识他们。

修改

我也试过这个伎俩：

jQuery('#frm').submit(...

但它的工作方式与第一种方法完全相同 - $('#frm').submit(...

修改

我发现第三种方法与上一种方法相同：

$('form').submit(...

总而言之，我有三种不同的方法，但只有当用户第二次点击按钮时，它们才有效。我有两种方法以标准方式工作，并且不能使用回调函数。

Answer 1

问题是，您在表单验证后注册表单提交。

所以，
1）首次单击按钮验证时，提交事件将注册到处理程序 2）在第二次单击按钮时，将调用已注册的处理程序。这就是为什么它会在第二次点击时提交。但请注意，您正在再次注册提交事件。这意味着，在第三次点击表格将提交两次，第四次点击表格将提交三次.....等等...

<强>解决方案
1）从$("#frm").submit()中删除submitHandler代码并将其放在外面。
2）在e.preventDefault();中使用$("#frm").submit()，以防止默认操作，并且不会重新加载页面 3）将AJAX代码直接放在submitHandler

中

$('#btn').one("click",function(){  // prevent from multiple submits
    $('#frm').validate({ // validate the form before submission
        ...general stuff: rules, messages, etc
        submitHandler:function(form){
            ...prepare parameters for ajax call
            $.ajax({
                type:'POST',
                ...general stuff
            });
        }
    });
});

$('#frm').submit(function (e) {

    e.preventDefault();
});

Answer 2

我猜你正在使用jqueryvalidation插件。如果这是真的，那么您使用$().validate()可能是错误的。

$().validate()函数用于初始化验证，它告诉脚本如何validate表单值以及验证通过时该怎么做（submitHandler属性）。 / p>

所以也许你应该编辑你的代码：

<form id='frm'>
...
</form>

$('#frm').validate({
    //...general stuff: rules, messages, etc
    submitHandler: function (form) {
        //blahblah before doing the submitting...
        form.submit();
    }
});

$('#btn').one('click', function (){
    $('#frm').submit();
});

但是，实际上您的$btn.one()事件处理程序仍然存在问题：如果在表单值不符合验证规则时单击按钮，则会消耗one触发处理程序的{{1}}次机会即使您重新输入正确的值，该按钮也不会响应您的点击，除非刷新页面。

所以也许你应该再次检查你的业务逻辑并重新设计表单提交流程，但这不是这个问题的讨论，祝你好运;）

无法在首次点击活动中提交表单

2 个答案: