如何防止页面在表单提交时重新加载,并显示一个小文本说“已成功注册”
How can I keep the page from reloading on form submit, and also show a small text saying "successfully registered"
我试图阻止页面重新加载,我想在提交表单时在表单中的某处显示一条小消息,上面写着"已成功注册"。我可以通过返回 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>");
});
});
- 来自文档或下一个静态父级的事件委派
- 我该如何编写一个CouchDB视图,列出每个存储文档的大小
- 如何创建一个“;显示更多“;按钮,并指定最初可以显示的文本行数
- Grunt-将多个文件最小化/处理为一个文件
- 使用D3.js和GeoJson在地图上的某些坐标上设置一个小图像
- JSTree's data.rslt.obj.text()返回一个文本数组,而不是所需节点的文本
- 在多行图表中,在每一行的末尾,我想要一个小圆圈和使用d3.js的端点值
- 返回一个关联数组,而不是mongoose中的文档数组
- 最小化CSS/JS文件,并使用命令行创建一个文件
- 一个html/javascript'小工具'知道用户何时单击了小部件外的任意位置
- 如何在一个onclick按钮上使用一个javascript函数选择多个文本字段
- 从另一个dojo模板窗口小部件调用dojo模板小部件中的函数
- 如何检测每个连续字符与前一个字符相差最小字母差的字符序列(1)
- 我有一个字段计算,如果结果低于 60,则需要显示最小值
- 使用Javascript从一个文本区域逐行解析.subsr(0,6)到另一个文本区
- 如何将文本从一个文本字段复制到其他文本字段
- 在JavaScript中查找数字对列表的最小第一个值
- 最小化一个包含中继器值的数组
- 中的条件语句.最小或一个数学.JavaScript中的max
- window.close()将Chrome最小化为一个冻结的白色弹出窗口,而不是关闭一个弹出窗口