需要点击两次提交表单（AJAX）两次、表单、AJAX
2023-09-10 20:27:14
作者：乖一点就抱你
我在创建时提交，并包括验证，并不需要刷新页面的形式。我的问题是我必须点击提交按钮两次，的形式发送。我猜这个问题涉及到：
submitHandler：功能（形式）{
$（'的MainForm）。递交（函数（）{
我的问题是我想不出更好的方式来做到这一点。我已经包括下面的完整JS：
$（文件）。就绪（函数（）{
$（'＆LT;我类=FA-检查＆GT;＆LT; / I＆GT;＆LT;我类=FA-感叹＆GT;＆LT; / I＆GT;'）。appendTo（$（'。MainForm的部分） ）;
$（MainForm的）。验证（{
//规则表单验证
规则：{
名字： {
要求：真实的
}，
姓： {
要求：真实的
}，
电子邮件： {
要求：真实，
电子邮件：真实的
}，
电话： {
要求：真实，
MINLENGTH：10
}，
服务：{
要求：真实的
}，
信息： {
要求：真实，
MINLENGTH：10
}，
人类：{
要求：真实，
范围：[4，4]
}
}，
//消息的表单验证
消息：{
名字： {
要求：请输入您的名字
}，
姓： {
要求：请输入您的姓氏
}，
电子邮件： {
要求：'请输入您的电子邮件地址，
电子邮件：'请输入一个有效的电子邮件地址
}，
电话： {
要求：'请输入您的电话号码
}，
服务：{
要求：'请输入你要查找的服务
}，
信息： {
要求：'请输入您的信息
}，
人类：{
要求：请回答的安全问题，
范围：这是不正确
}
}，
//不要更改低于code
errorPlacement：功能（错误，元素）{
error.appendTo（element.parent（））;
}，
submitHandler：功能（形式）{
$（'的MainForm）。递交（函数（）{
$阿贾克斯（{
网址：toAction.php，
数据：$（本）.serialize（）
键入：POST，
成功：功能（数据）{
的console.log（数据）;
$（＃成功）显示（）淡出（15000）。 // ===显示成功消息==
}，
错误：功能（数据）{
$（＃错误）显示（）淡出（15000）。 // ===显示错误消息====
}
}）;
即preventDefault（）; // ===要避免页面刷新，并触发事件点击===
}）;
}
}）;
}）;
解决方案 
在提交处理程序，你应该只使用一个Ajax请求保存数据 - 的 submitHandler 是所谓当表单提交，所以没有必要注册其他提交处理。也有以prevent默认的动作，你可以只返回假从提交处理程序
$（文件）。就绪（函数（）{
$（'＆LT;我类=FA-检查＆GT;＆LT; / I＆GT;＆LT;我类=FA-感叹＆GT;＆LT; / I＆GT;'）。appendTo（$（'。MainForm的部分） ）;
$（MainForm的）。验证（{
//规则表单验证
规则：{
名字： {
要求：真实的
}，
姓： {
要求：真实的
}，
电子邮件： {
要求：真实，
电子邮件：真实的
}，
电话： {
要求：真实，
MINLENGTH：10
}，
服务：{
要求：真实的
}，
信息： {
要求：真实，
MINLENGTH：10
}，
人类：{
要求：真实，
范围：[4，4]
}
}，
//消息的表单验证
消息：{
名字： {
要求：请输入您的名字
}，
姓： {
要求：请输入您的姓氏
}，
电子邮件： {
要求：'请输入您的电子邮件地址，
电子邮件：'请输入一个有效的电子邮件地址
}，
电话： {
要求：'请输入您的电话号码
}，
服务：{
要求：'请输入你要查找的服务
}，
信息： {
要求：'请输入您的信息
}，
人类：{
要求：请回答的安全问题，
范围：这是不正确
}
}，
//不要更改低于code
errorPlacement：功能（错误，元素）{
error.appendTo（element.parent（））;
}，
submitHandler：功能（形式）{
$阿贾克斯（{
网址：toAction.php，
数据：$（形式）.serialize（）
键入：POST，
成功：功能（数据）{
的console.log（数据）;
$（＃成功）显示（）淡出（15000）。 // ===显示成功消息==
}，
错误：功能（数据）{
$（＃错误）显示（）淡出（15000）。 // ===显示错误消息====
}
}）;
返回false; // ===要避免页面刷新，并触发事件点击===
}
}）;
}）;
I created a form that does not need page refresh when submitted and includes validation. My problem is I have to click the submit button twice to send the form. I'm guessing the problem is related to:
submitHandler: function(form) {
$('.mainform').submit(function(){
My problem is I just can't figure out a better way to do this. I've included the full JS below:
$(document).ready(function() {
$('<i class="fa-check"></i><i class="fa-exclamation"></i>').appendTo($('.mainform section'));
$(".mainform").validate({
// Rules for form validation
rules: {
firstname: {
required: true
},
lastname: {
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true,
minlength: 10
},
services: {
required: true
},
message: {
required: true,
minlength: 10
},
human: {
required: true,
range: [4, 4]
}
},
// Messages for form validation
messages: {
firstname: {
required: 'Please enter your first name'
},
lastname: {
required: 'Please enter your last name'
},
email: {
required: 'Please enter your email address',
email: 'Please enter a VALID email address'
},
phone: {
required: 'Please enter your phone number'
},
services: {
required: 'Please enter the services you are looking for'
},
message: {
required: 'Please enter your message'
},
human: {
required: 'Please answer security question',
range: 'That is incorrect'
}
},
// Do not change code below
errorPlacement: function(error, element) {
error.appendTo(element.parent());
},
submitHandler: function(form) {
$('.mainform').submit(function(){
$.ajax({
url: 'toAction.php',
data: $(this).serialize(),
type: 'POST',
success: function(data) {
console.log(data);
$("#success").show().fadeOut(15000); //=== Show Success Message==
},
error: function(data) {
$("#error").show().fadeOut(15000); //===Show Error Message====
}
});
e.preventDefault(); //=== To Avoid Page Refresh and Fire the Event "Click"===
});
}
});
});
解决方案
In the submit handler, you should just use an ajax request to save the data - the submitHandler is called when the form is submitted so there is no need to register another submit handler. Also there is to prevent the default action you can just return false from the submit handler
$(document).ready(function () {
$('<i class="fa-check"></i><i class="fa-exclamation"></i>').appendTo($('.mainform section'));
$(".mainform").validate({
// Rules for form validation
rules: {
firstname: {
required: true
},
lastname: {
required: true
},
email: {
required: true,
email: true
},
phone: {
required: true,
minlength: 10
},
services: {
required: true
},
message: {
required: true,
minlength: 10
},
human: {
required: true,
range: [4, 4]
}
},
// Messages for form validation
messages: {
firstname: {
required: 'Please enter your first name'
},
lastname: {
required: 'Please enter your last name'
},
email: {
required: 'Please enter your email address',
email: 'Please enter a VALID email address'
},
phone: {
required: 'Please enter your phone number'
},
services: {
required: 'Please enter the services you are looking for'
},
message: {
required: 'Please enter your message'
},
human: {
required: 'Please answer security question',
range: 'That is incorrect'
}
},
// Do not change code below
errorPlacement: function (error, element) {
error.appendTo(element.parent());
},
submitHandler: function (form) {
$.ajax({
url: 'toAction.php',
data: $(form).serialize(),
type: 'POST',
success: function (data) {
console.log(data);
$("#success").show().fadeOut(15000); //=== Show Success Message==
},
error: function (data) {
$("#error").show().fadeOut(15000); //===Show Error Message====
}
});
return false; //=== To Avoid Page Refresh and Fire the Event "Click"===
}
});
});
上一篇：如何在函数传递变量的PHP在javascript？变量、函数、如何在、javascript
下一篇：如何动态地添加一个新的输入字段＆QUOT; KEYDOWN＆QUOT;使用jQuery？字段、动态、QUOT、KEYDOWN
相关推荐
猜您喜欢
精彩图集
精彩推荐
图片推荐