无法在首次点击活动中提交表单 [英] Unable to submit a form on the first click event

问题描述

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

Well, I spent hours on this problem and scanned the whole stackoverflow, but still do not know what to do. But what really gets me nuts is that such a trivial and the simplest in the world thing is not working. So, what I have now is a form with inputs and a button:

<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>

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

And I have this code which is supposed to send the 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中实现的这种行为背后的逻辑。此外，我应该说，我尝试了很多其他技巧，例如：

The problem is, when a user clicks on submit button for the first time, then the form is not submitted, if, however, he or she clicks it for the second time, then it is submitted ok. I can't understand the logic behind such behaviour implemented in jquery. Besides, I should say, that I have tried many other tricks, like:

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

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

But they work not as expected, as if there is no callback function - I'm redirected to the url, but do not stay on the same page - just what I expect from e.preventDefault. I guess there is some sacred method or magic properties in jquery that I should use to make it work (like method one which prevents terrible multiple submits). But at this moment I do not know them.

编辑

我也试过这个伎俩：

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

但它与第一​​种方法完全相同 - $（'＃frm'）。submit（...

but it works exactly like the first method - $('#frm').submit(...

编辑

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

I found the third method which works like the previous one:

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

总结一下，我有三种不同的方法，但所有这些方法都只适用于用户第二次点击按钮。我有两种方法以标准方式工作，并且不能使用回调函数。

To sum up, I have three different methods, but all of them work only when a user clicks on the button for the second time. And I have two methods that work in a standard manner and do not make it possible to use a callback function.

推荐答案

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

The problem is, you are registering for form submit after the form validation.

所以，

1）首次单击按钮验证时，提交事件将注册到处理程序。

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

so,
1) On first click of button validation, the submit event is registered to a handler.
2) On second click of the button, the registered handler will be called. that is why it get submitted on second click. But note that you are registering again for the submit event. which means, on third click the form will be submitted twice, on fourth click the form will be submitted thrice..... and so on...

解决方案

1）从中删除​​ $（＃frm）。submit（）代码submitHandler 并将其放在外面。

2）在 $中使用 e.preventDefault（）; （＃frm）。submit（）因此阻止了默认操作，并且不会重新加载页面。

3）将AJAX代码直接放在<$ c $中c> submitHandler

Solution
1) remove the $("#frm").submit() code from the submitHandler and put it outside.
2) use e.preventDefault(); in $("#frm").submit() so the default action is prevented and page doesn't get reloaded.
3) put the AJAX code directly in 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();
});

这篇关于无法在首次点击活动中提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！