我试图阻止页面重新加载，我想在提交表单时在表单中的某处显示一条小消息，上面写着"已成功注册"。我可以通过返回 false 来做到这一点，但来自用户的输入不会发布到我的数据库中。
提前谢谢你
这是我的代码：
<script>
function validate(form) {
fail = validateName(form.name.value)
fail += validateEmail(form.email.value)
fail += validateCity(form.city.value)
if (fail == "") {
alert("You have been successfully registered."); return true }
else {
document.getElementById('errors').innerHTML = fail;}
return false
}
function validateName(field) {
if (field == "") return "No name was entered.<br/>"
else if (field.length < 3) return "Name must be at least 3 characters.<br/>"
else if (!/[a-zA-Z ]/.test(field)) return "Name can only have alphabetical characters.<br/>"
return ""
}
function validateEmail(field) {
if (field == "") return "No email was entered.<br/>"
else if (!((field.indexOf(".") > 0) && (field.indexOf("@") > 0)) || /[^a-zA-Z0-9.@_-]/.test(field)) return "The email address is invalid.<br/>"
return ""
}
function validateCity(field) {
if (field == "") return "No city was entered.<br/>"
else if (field.length < 3) return "City must be at least 3 characters.<br/>"
else if (!/[a-zA-Z ]*$/.test(field)) return "City can only have alphabetical characters.<br/>"
return ""
}
</script>
<form action="<?php echo $editFormAction; ?>" name="subscribe" onSubmit="return validate(this)" id="subscribe" method="POST" autocomplete="off">
<div id="errors"></div>
<input name="name" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" type="text" id="name" placeholder="Your name"/>
<input name="email" required id="email" type="email" title="Please enter your email address" placeholder="Your email address"/>
<input name="city" required pattern="[a-zA-Z ]*$" title="Please enter only alphabetic characters" id="city" placeholder="Your city"/>
<div id="buttons">
<input type="reset" name="reset" id="resetbtn" class="resetbtn" value="Reset">
<input type="submit" name="submit" id="submitbtn" class="submitbtn" tabindex="7" value="Submit this!">
<br style="clear:both;">
</div>
<input type="hidden" name="MM_insert" value="subscribe">
</form>
！（https://docs.google.com/file/d/0B69C1JAAohvcYmIyOFdZRGlPRFk/edit?usp=sharing）
如前面的海报所示，您应该编写一个 Ajax 函数来异步提交表单。表单处理程序将返回一条消息，该消息可以附加到页面上的div 中。下面是一个示例：
$(function() {
$('#submitbtn').click(function(event) {
event.preventDefault();
var form = $(this).closest('form'),
action = form.attr('action');
$.post(action, form.serialize(), function(data) {
$('#form-message').html(data);
})
});
});
根据OP的回复进行更新：
我发布的代码是如何使用Ajax的示例，而不是完整的解决方案。要使其成为一个完整的解决方案，您可以将原始代码与我发布的代码相结合，以便仅在表单通过验证例程时触发表单提交。验证例程将出现在 event.preventDefault（） 之后，这是阻止表单立即提交的原因。
我会为您的错误消息创建一个数组。每次缺少必填字段时，您都可以向数组添加一个错误。在验证例程结束时，您可以检查数组的大小。如果它为空，意味着没有错误，您将提交表单。如果它包含一个或多个错误，您将不会提交表单。相反，您会将错误打印到屏幕上。
我的代码示例建议后端表单处理程序返回包含要向用户显示的状态消息的数据。例如"感谢您注册！"或"哎呀，出事了！请再试一次。状态消息将附加到 ID 为"表单消息"的div 中。您必须向后端表单处理程序添加 return 语句，并向标记添加类似的div 元素才能创建该功能。
提交form时，您可以使用AJAX并返回false
AJAX，您可以将所有form值传递给服务器script
这是你必须做的，
<form id="formID" onsubmit="return mformPost('your_php_action.php', '#formID');">
<input type="text" name="test" id="test" value=""/>
</form>
在AJAX
function mformPost(destinationUrl, formID) {
var formData = $(formID).serialize(); // serialize your form data
$.ajax({
type: 'POST',
url: destinationUrl,
data: formData,
cache: true,
async:false,
error: function(error) {
alert(error.responseText + error.responseStatus);
},
success: function(data){ // return data from your php file
if(data){
alert('Successfully registered');
}
}
});
return false;
}
如果希望页面不重新加载，请不要使用带有提交操作的表单 - 使用 AJAX 将数据发送到单独的 PHP 脚本，并让浏览器在回调函数中启动通知或弹出窗口。
使用 jQuery 的 post 函数：
$("#submitbtn").click(function() {
$.post("yourphpscript.php", {name: $("#name").val(), email: $("#email").val(), city: $("#city").val() },
function(){
$("#submitbtn").after("<p>Successfully registered.</p>");
});
});