我有一个定制的PHP模板-表单。我正在尝试使用AJAX在同一页面中发送此表单，而无需重新加载页面。提交后隐藏表单并显示thank you 消息此表单以模式显示。但实际情况是，页面仍在重新加载。
HTML
<form method="POST" action="" name="modalForm" id="modalForm" enctype="multipart/form-data" autocomplete="off">
<input placeholder="Last Name*" type="text" name="lastName" id="lastName" value="" required>
<label class="error" for="name" id="lastName_error">This field is required.</label>
<input placeholder="First Name*" type="text" name="firstName" id="firstName" value="" required>
<label class="error" for="name" id="firstName_error">This field is required.</label>
<input placeholder="Email Address" type="email" name="Email" id="Email" onblur="this.setAttribute(\'value\', this.value);" value="" required>
<label class="error" for="email" id="email_error">This field is required.</label>
<span class="validation-text">Please enter a valid email address.</span>
<input placeholder="Mobile Number*" type="text" name="contactNumber" id="contactNumber" onkeypress="return isNumberKey(event)" value="" size="11" minlength="11" maxlength="11" pattern ="^09\\d{9}$" required>
<label class="error" for="contactNumber" id="contactNumber_error">This field is required.</label>
<input type="submit" name="submit" value="Submit" id="form-submit">
</form>
JS
(function($) {
$(\'.error\').hide();
$(".button").click(function() {
// validate and process form here
$(\'.error\').hide();
var name = $("input#lastName").val();
if (lastName == "") {
$("label#lastName_error").show();
$("input#lastName").focus();
return false;
}
var name = $("input#firstName").val();
if (lastName == "") {
$("label#firstName_error").show();
$("input#firstName").focus();
return false;
}
var email = $("input#Email").val();
if (Email == "") {
$("label#email_error").show();
$("input#Email").focus();
return false;
}
var phone = $("input#contactNumber").val();
if (contactNumber == "") {
$("label#contactNumber_error").show();
$("input#contactNumber").focus();
return false;
}
});
var dataString = \'lastName=\'+ lastName + \'&Email=\' + Email + \'&contactNumber=\' + contactNumber;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/wordpress-page/",
data: dataString,
success: function() {
$(\'#modalForm\').html("<div id=\'message\'></div>");
$(\'#message\').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$(\'#message\').append("<img id=\'checkmark\' src=\'images/check.png\' />");
});
}
});
return false;
});
SO网友:janh
jQuery事件绑定到类的元素submit, 但是表单中的提交按钮没有该类。
要么将该类添加到submit按钮，要么只针对表单本身。只需更改
$(".button").click(function() {
至
$("#modalForm").submit(function() {
提交表单时，无论用户单击提交按钮还是简单地在文本字段中单击enter，都会触发此操作。
SO网友:Aditya Agarwal
我在构建自己的前端表单时也遇到了同样的问题。
下面是解决方法，表单具有默认的提交和重新加载倾向。我们不会停止这一点，而是使用AJAX提交数据。
这在很大程度上取决于其他功能。但总的来说，这应该是可行的。
$(".button").click(function(e) {
e.preventDefault();
$(\'.error\').hide();
var name = $("input#lastName").val();
if (lastName == "") {
$("label#lastName_error").show();
$("input#lastName").focus();
return false;
}
var name = $("input#firstName").val();
if (lastName == "") {
$("label#firstName_error").show();
$("input#firstName").focus();
return false;
}
var email = $("input#Email").val();
if (Email == "") {
$("label#email_error").show();
$("input#Email").focus();
return false;
}
var phone = $("input#contactNumber").val();
if (contactNumber == "") {
$("label#contactNumber_error").show();
$("input#contactNumber").focus();
return false;
}
});
var dataString = \'lastName=\'+ lastName + \'&Email=\' + Email + \'&contactNumber=\' + contactNumber;
//alert (dataString);return false;
$.ajax({
type: "POST",
url: "/wordpress-page/",
data: dataString,
success: function() {
$(\'#modalForm\').html("<div id=\'message\'></div>");
$(\'#message\').html("<h2>Contact Form Submitted!</h2>")
.append("<p>We will be in touch soon.</p>")
.hide()
.fadeIn(1500, function() {
$(\'#message\').append("<img id=\'checkmark\' src=\'images/check.png\' />");
});
}
});
return false;
});
