需要点击两次提交表单（AJAX） [英] Need to click twice on form submit (AJAX)
本文介绍了需要点击两次提交表单（AJAX）的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我在创建时提交，并包括验证，并不需要刷新页面的形式。我的问题是我必须点击提交按钮两次，的形式发送。我猜这个问题涉及到：
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"===
}
});
});
这篇关于需要点击两次提交表单（AJAX）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
