[英]Using jQuery validate to upload a form, using ajax in the submitHandler()… not working
[英]jQuery Validate submitHandler Not Working With Ajax
我有以下表格:
<form id="squatsForm">
{% csrf_token %}
<input type="text" name="amount" id="squatsVal" value="Squats" />
<input type="hidden" name="exercise" value="squats" />
<input type="submit" id="submitSquats" value="Add Squats"/><br />
</form>
我想验证表单,然后通过Ajax发送该表单中的数据以进行进一步处理。 我正在尝试使用submitHandler
因此该表单不会执行通过POST请求加载新页面的默认操作,而是触发我的Ajax函数:
$(document).ready(function() {
$('#squatsForm').validate({
rules: {
amount: {
required: true,
number: true
}
},
submitHandler: function(form) {
$.post(
"submitWorkout1",
form.serialize(),
function(data) {
var jsonData = $.parseJSON(data);
$("#squats").html(jsonData['amount']);
});
}
});
但是,当我尝试使用表单输入数据时,它将重新加载页面并且不执行Ajax请求。
在实施验证之前,我的Ajax请求工作正常。
它可以验证您的表格吗?
我没有足够的声誉来对您的问题发表评论,否则,我只是问您是否只是忘记终止就绪功能或在粘贴粘贴时错过了它。
我使用了您的代码,并确认它没有运行。 当我单击“ 添加深蹲”按钮时,无论我在“ 数量”字段中是否具有适当的值,它都只会重新加载页面。
但是,当我添加});
到代码的末尾以正确结束$(document).ready(function () {
,它起作用了!
它执行验证,并触发我作为submitHandler
的第一条语句放置的submitHandler
。
$(document).ready(function () {
$('#squatsForm').validate({
rules: {
amount: {
required: true,
number: true
}
},
submitHandler: function (form) {
$.post(
"submitWorkout1",
form.serialize(),
function (data) {
var jsonData = $.parseJSON(data);
$("#squats").html(jsonData['amount']);
}
);
}
});
});
我希望解决问题的方法就像正确地结束ready
函数一样简单。 如果不是,让我们一起调试一下! 让我知道。
用jquery函数将SubmitHandler函数中的'form'变量包装起来将对其进行修复
$(document).ready(function() {
$('#squatsForm').validate({
rules: {
amount: {
required: true,
number: true
}
},
submitHandler: function(form) {
$.post(
"submitWorkout1",
$(form).serialize(),
function(data) {
var jsonData = $.parseJSON(data);
$("#squats").html(jsonData['amount']);
});
}
});
请参阅以下答案: https : //stackoverflow.com/a/10861735/1497042
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.