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

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

{% csrf_token %}


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

 $('#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(... 

但它们的工作效果并不像预期的那样,好像没有回调函数 – 我被重定向到了url,但是没有停留在同一页面上 – 正如我对e.preventDefault期望。 我想在jquery中有一些神圣的方法或魔法属性,我应该用它来使它工作(就像防止可怕的多次提交的方法一样)。 但此刻我不知道他们。

编辑

我也试过这个伎俩:

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

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

编辑

我发现第三种方法与上一种方法类似:

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

总而言之,我有三种不同的方法,但所有这些方法仅在用户第二次点击按钮时才起作用。 我有两种方法以标准方式工作,并且不能使用回调函数。

问题是,您在表单validation后注册表单提交。

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


1)从submitHandler删除$("#frm").submit()代码并将其放在外面。
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(); }); 

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

$().validate()函数用于初始化validation,它告诉脚本如何validate表单值以及如果传递validate该怎么做( submitHandler属性)。

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

 
...

 $('#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()事件处理程序仍然存在问题:如果在表单值不符合validation规则时单击按钮,则会消耗one触发处理程序的机会,即使你重新输入正确的值,按钮永远不会响应您的点击,除非刷新页面。

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