好吧,我花了几个小时来解决这个问题并扫描了整个 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(...
总而言之,我有三种不同的方法,但所有这些方法仅在用户第二次单击按钮时才起作用。我有两种以标准方式工作的方法,并且无法使用回调函数。
最佳答案
问题是,您在表单验证后注册表单提交。
所以,
1) 第一次单击按钮验证时,提交事件将注册到处理程序。
2) 第二次单击按钮时,将调用已注册的处理程序。这就是为什么它会在第二次点击时提交。但请注意,您正在再次注册提交事件。这意味着,第三次单击时,表单将提交两次,第四次单击时,表单将提交三次......依此类推......
解决方案
1)从submitHandler
中删除$("#frm").submit()
代码并将其放在外面。
2) 在 $("#frm").submit()
中使用 e.preventDefault();
,以便阻止默认操作并且页面不会重新加载。< br/>
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();
});
关于javascript - 无法在第一次点击事件时提交表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29183737/