提交时停止表单刷新页面
Posted
技术标签:
【中文标题】提交时停止表单刷新页面【英文标题】：Stop form refreshing page on submit 【发布时间】：2013-10-27 13:43:09 【问题描述】：在字段中没有任何数据的情况下按下发送按钮时，如何防止页面刷新？
验证设置正常，所有字段变为红色，但页面立即刷新。我对JS的了解比较基础。
特别是我认为底部的processForm() 函数“不好”。
HTML
<form id="prospects_form" method="post">
<input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" />
<input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" />
<input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" />
<textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>
<button id="form_send" tabindex="5" class="btn" type="submit" onclick="return processForm()">Send</button>
<div id="form_validation">
<span class="form_captcha_code"></span>
<input id="form_captcha" class="boxsize" type="text" name="form_captcha" placeholder="Enter code" tabindex="4" value="" />
</div>
<div class="clearfix"></div>
</form>
JS
$(document).ready(function()
// Add active class to inputs
$("#prospects_form .boxsize").focus(function() $(this).addClass("hasText"); );
$("#form_validation .boxsize").focus(function() $(this).parent().addClass("hasText"); );
// Remove active class from inputs (if empty)
$("#prospects_form .boxsize").blur(function() if ( this.value === "") $(this).removeClass("hasText"); );
$("#form_validation .boxsize").blur(function() if ( this.value === "") $(this).parent().removeClass("hasText"); );
///////////////////
// START VALIDATION
$("#prospects_form").ready(function()
// DEFINE GLOBAL VARIABLES
var valName = $('#form_name'),
valEmail = $("#form_email"),
valEmailFormat = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]1,3\.[0-9]1,3\.[0-9]1,3\.[0-9]1,3\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]2,))$/,
valMsg = $('#form_message'),
valCaptcha = $('#form_captcha'),
valCaptchaCode = $('.form_captcha_code');
// Generate captcha
function randomgen()
var rannumber = "";
// Iterate through 1 to 9, 4 times
for(ranNum=1; ranNum<=4; ranNum++) rannumber+=Math.floor(Math.random()*10).toString();
// Apply captcha to element
valCaptchaCode.html(rannumber);
randomgen();
// CAPTCHA VALIDATION
valCaptcha.blur(function()
function formCaptcha()
if ( valCaptcha.val() == valCaptchaCode.html() )
// Incorrect
valCaptcha.parent().addClass("invalid");
return false;
else
// Correct
valCaptcha.parent().removeClass("invalid");
return true;
formCaptcha();
);
// Remove invalid class from captcha if typing
valCaptcha.keypress(function()
valCaptcha.parent().removeClass("invalid");
);
// EMAIL VALIDATION (BLUR)
valEmail.blur(function()
function formEmail()
if (!valEmailFormat.test(valEmail.val()) && valEmail.val() !== "" )
// Incorrect
valEmail.addClass("invalid");
else
// Correct
valEmail.removeClass("invalid");
formEmail();
);
// Remove invalid class from email if typing
valEmail.keypress(function()
valEmail.removeClass("invalid");
);
// VALIDATION ON SUBMIT
$('#prospects_form').submit(function()
console.log('user hit send button');
// EMAIL VALIDATION (SUBMIT)
function formEmailSubmit()
if (!valEmailFormat.test(valEmail.val()))
// Incorrect
valEmail.addClass("invalid");
else
// Correct
valEmail.removeClass("invalid");
formEmailSubmit();
// Validate captcha
function formCaptchaSubmit()
if( valCaptcha.val() === valCaptchaCode.html() )
// Captcha is correct
else
// Captcha is incorrect
valCaptcha.parent().addClass("invalid");
randomgen();
formCaptchaSubmit();
// If NAME field is empty
function formNameSubmit()
if ( valName.val() === "" )
// Name is empty
valName.addClass("invalid");
else
valName.removeClass("invalid");
formNameSubmit();
// If MESSAGE field is empty
function formMessageSubmit()
if ( valMsg.val() === "" )
// Name is empty
valMsg.addClass("invalid");
else
valMsg.removeClass("invalid");
formMessageSubmit();
// Submit form (if all good)
function processForm()
if ( formEmailSubmit() && formCaptchaSubmit() && formNameSubmit() && formMessageSubmit() )
$("#prospects_form").attr("action", "/clients/oubc/row-for-oubc-send.php");
$("#form_send").attr("type", "submit");
return true;
else if( !formEmailSubmit() )
valEmail.addClass("invalid");
return false;
else if ( !formCaptchaSubmit() )
valCaptcha.parent().addClass("invalid");
return false;
else if ( !formNameSubmit() )
valName.addClass("invalid");
return false;
else if ( !formMessageSubmit() )
valMsg.addClass("invalid");
return false;
else
return false;
);
);
// END VALIDATION
/////////////////
);
【问题讨论】：
【参考方案1】：您可以阻止表单提交
$("#prospects_form").submit(function(e)
e.preventDefault();
);
当然，在函数中，你可以检查空字段，如果有什么不正确的地方，e.preventDefault() 会停止提交。
没有 jQuery：
var form = document.getElementById("myForm");
function handleForm(event) event.preventDefault();
form.addEventListener('submit', handleForm);
【讨论】：
此方法需要 jQuery。我认为使用按钮类型属性来防止它总是更好的做法。 这种方法可以在没有 jQuery 的情况下完成，例如：var form = document.getElementById("myForm"); function handleForm(event) event.preventDefault(); form.addEventListener('submit', handleForm); 我不知道如何正确格式化评论。
基本上，在您的表单提交处理代码中包含event.preventDefault();。我在其他评论中的一个单行变体（与 jQuery 版本基本相同）将是：document.getElementById("prospects_form").addEventListener('submit', function(event)event.preventDefault();); 可能有一种方法可以缩短它（不使用addEventListener()，但似乎这些方式做事的人通常不赞成。【参考方案2】：
添加这个 onsubmit="return false" 代码：
<form name="formname" onsubmit="return false">
这为我解决了问题。它仍然会运行你指定的 onClick 函数
【讨论】：
它仍然会运行 HTML5 浏览器的表单验证。 不需要库，jquery 很棒，原生在这种情况下更好。 这是没有 JQuery 的最干净的解决方案。此外，您还可以将其用作； onsubmit="return submitFoo()" 如果您需要在提交时调用函数，则在 submitFoo() 中返回 false。 但它永远不会让表单提交。【参考方案3】：将按钮类型替换为button:
<button type="button">My Cool Button</button>
【讨论】：
这是建议的唯一方法，即使存在对测试和开发有用的 javascript 错误，也可以防止页面刷新。 这很有用，但不会阻止用户按 [Enter] 时提交/重新加载。 不适合表单验证：/您需要在表单元素中添加提交按钮 如果您确定客户端将始终使用 JavaScript，我认为这将起作用，否则不应排除提交类型的按钮 @briancollins081 这不是一个全球性的解决方案。这个答案仅指OP的当前情况，如果没有javascript，即使button type="submit"他已经使用jQuery提交了按钮操作表单，OP也将永远无法在任何地方提交表单。【参考方案4】：
使用表单提交时防止重新加载页面的一个好方法是在您的 onsubmit 属性中添加return false。
<form action="#" onsubmit="yourJsFunction();return false">
<input type="text"/>
<input type="submit"/>
</form>
【讨论】：
这完全适合我。这应该被接受的答案。action='#'
超级老线程，但是对于现在遇到此问题的任何人，请不要尝试action="#"，因为它不起作用并且不是合适的解决方案。关键其实是onsubmit="yourJsFunction();return false"
但是你不觉得返回 false 不优雅吗？【参考方案5】：
您可以使用此代码提交表单而无需刷新页面。我已经在我的项目中这样做了。
$(function ()
$('#myFormName').on('submit',function (e)
$.ajax(
type: 'post',
url: 'myPageName.php',
data: $('#myFormName').serialize(),
success: function ()
alert("Email has been sent!");
);
e.preventDefault();
);
);
【讨论】：
这个答案是唯一能保持表单正常运行的答案。就我而言，这是唯一的解决方案，因为我是从第三方获取表单并且不能玩太多。【参考方案6】：当您为用户提供两种提交表单的可能性时，这个问题变得更加复杂：
-
点击特殊按钮
按 Enter 键
在这种情况下，您需要一个函数来检测按下的键，如果按下 Enter 键，您将在其中提交表单。
现在 IE 出现了问题（无论如何是 11 版） 评论： Chrome 和 FireFox 都不存在这个问题！
当您单击提交按钮时，表单被提交一次；很好。 当您点击 Enter 时，表单被提交了两次...并且您的 servlet 将被执行两次。如果您没有 PRG（重定向后获取）架构服务器端，结果可能会出乎意料。尽管解决方案看起来微不足道，但我花了好几个小时才解决这个问题，所以我希望它对其他人有用。 此解决方案已在 IE (v 11.0.9600.18426)、FF (v 40.03) 和 Chrome (v 53.02785.143 m 64 位) 等平台上成功测试
源代码 HTML & js 在 sn-p.那里描述了原理。 警告：
你不能在 sn-p 中测试它，因为 post 操作不是 定义并按 Enter 键可能会干扰 ***。
如果您遇到这个问题，那么只需将 js 代码复制/粘贴到您的环境中，并根据您的上下文进行调整。
/*
* inForm points to the form
*/
var inForm = document.getElementById('idGetUserFrm');
/*
* IE submits the form twice
* To avoid this the boolean isSumbitted is:
* 1) initialized to false when the form is displayed 4 the first time
* Remark: it is not the same event as "body load"
*/
var isSumbitted = false;
function checkEnter(e)
if (e && e.keyCode == 13)
inForm.submit();
/*
* 2) set to true after the form submission was invoked
*/
isSumbitted = true;
function onSubmit ()
if (isSumbitted)
/*
* 3) reset to false after the form submission executed
*/
isSumbitted = false;
return false;
<!DOCTYPE html>
<html>
<body>
<form id="idGetUserFrm" method="post" action="servletOrSomePhp" onsubmit="return onSubmit()">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<input type="submit" value="Submit">
</form>
</body>
</html>【讨论】：
【参考方案7】：大多数人会通过调用event.preventDefault() 函数来阻止表单提交。
另一种方法是去掉按钮的onclick属性，将processForm()中的代码取出到.submit(function() 中，因为return false;导致表单无法提交。另外，使formBlaSubmit() 函数根据有效性返回布尔值，以便在processForm(); 中使用
katsh 的答案是一样的，只是更容易消化。
（顺便说一下，我是***的新手，请给我指导。）
【讨论】：
虽然很高兴知道return false; 也可以阻止事件冒泡 DOM — 它是 event.preventDefault(); event.stopPropagation(); 的简写【参考方案8】：
在纯 Javascript 中，使用：e.preventDefault()
e.preventDefault() 在 jquery 中使用，但在 javascript 中有效。
document.querySelector(".buttonclick").addEventListener("click",
function(e)
//some code
e.preventDefault();
)
【讨论】：
【参考方案9】：最好的解决方案是 onsubmit 调用任何你想要的函数并在它之后返回 false。
onsubmit="xxx_xxx(); return false;"
【讨论】：
【参考方案10】：我个人喜欢在提交时验证表单，如果有错误，只需返回 false。
$('form').submit(function()
var error;
if ( !$('input').val() )
error = true
if (error)
alert('there are errors')
return false
);
http://jsfiddle.net/dfyXY/
【讨论】：
【参考方案11】： $("#buttonID").click(function (e)
e.preventDefault();
//some logic here
【讨论】：
【参考方案12】：如果你想使用 Pure Javascript 那么下面的 sn-p 会比其他任何东西都好。
假设：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form Without Submiting With Pure JS</title>
<script type="text/javascript">
window.onload = function()
/**
* Just Make sure to return false so that your request will not go the server script
*/
document.getElementById('simple_form').onsubmit = function()
// After doing your logic that you want to do
return false
</script>
</head>
<body>
</body>
</html>
<form id="simple_form" method="post">
<!-- Your Inputs will go here -->
<input type="submit" value="Submit Me!!" />
</form>
希望它对你有用！！
【讨论】：
【参考方案13】：如果您不使用操作，只需在表单的操作属性中使用“javascript:”即可。
【讨论】：
包含一些示例，以更清楚地说明您的解决方案。【参考方案14】：在我看来，大多数答案都试图解决您提出的问题，但我认为这不是您的方案的最佳方法。
在字段中没有任何数据的情况下按下发送按钮时，如何防止页面刷新？
.preventDefault() 确实不会刷新页面。但我认为在您想要填充数据的字段上使用简单的require 可以解决您的问题。
<form id="prospects_form" method="post">
<input id="form_name" tabindex="1" class="boxsize" type="text" name="name" placeholder="Full name*" maxlength="80" value="" required/>
<input id="form_email" tabindex="2" class="boxsize" type="text" name="email" placeholder="Email*" maxlength="100" value="" required/>
<input id="form_subject" class="boxsize" type="text" name="subject" placeholder="Subject*" maxlength="50" value="FORM: Row for OUBC" required/>
<textarea id="form_message" class="boxsize" name="message" placeholder="Message*" tabindex="3" rows="6" cols="5" maxlength="500"></textarea>
</form>
注意在每个input 末尾添加的require 标签。结果将是相同的：在字段中没有任何数据的情况下不刷新页面。
【讨论】：
【参考方案15】：function ajax_form(selector, obj)
var form = document.querySelectorAll(selector);
if(obj)
var before = obj.before ? obj.before : function()return true;;
var $success = obj.success ? obj.success: function()return true;;
for (var i = 0; i < form.length; i++)
var url = form[i].hasAttribute('action') ? form[i].getAttribute('action') : window.location;
var $form = form[i];
form[i].submit = function()
var xhttp = new XMLHttpRequest();
xhttp.open("POST", url, true);
var FD = new FormData($form);
/** prevent submiting twice */
if($form.disable === true)
return this;
$form.disable = true;
if(before() === false)
return;
xhttp.addEventListener('load', function()
$form.disable = false;
return $success(JSON.parse(this.response));
);
xhttp.send(FD);
return form;
没有检查它是如何工作的。你也可以 bind(this) 让它像 jquery ajaxForm 一样工作
像这样使用它：
ajax_form('form',
before: function()
alert('submiting form');
// if return false form shouldn't be submitted
,
success:function(data)
console.log(data)
)[0].submit();
它返回节点，所以你可以做一些类似提交 i 上面的例子
到目前为止还不够完美，但它应该可以工作，您应该添加错误处理或删除禁用条件
【讨论】：
【参考方案16】：有时 e.preventDefault(); 工作，然后开发人员很高兴，但有时不工作，然后开发人员很伤心，然后我找到了解决方案，为什么有时不工作
第一个代码有时会起作用
$("#prospects_form").submit(function(e)
e.preventDefault();
);
第二个选项为什么不起作用？ 这不起作用，因为 jquery 或其他 javascript 库未正确加载，您可以在控制台中检查所有 jquery 和 javascript 文件是否正确加载。
这解决了我的问题。希望对您有所帮助。
【讨论】：
【参考方案17】：我希望这是最后一个答案
$('#the_form').submit(function(e)
e.preventDefault()
alert($(this).serialize())
// var values = $(this).serialize()
// logic....
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="the_form">
Label-A <input type="text" name='a'required><br>
Label-B <input type="text" name="b" required><br>
Label-C <input type="password" name="c" required><br>
Label-D <input type="number" name="d" required><br>
<input type="submit" value="Save without refresh">
</form>
【讨论】：
【参考方案18】：使用 JS 的最佳方法是使用 preventDefault() 函数。 请考虑以下代码以供参考：
function loadForm()
var loginForm = document.querySelector('form'); //Selecting the form
loginForm.addEventListener('submit', login); //looking for submit
function login(e)
e.preventDefault(); //to stop form action i.e. submit
【讨论】：
【参考方案19】：<form onsubmit="myFunction(event)">
Name : <input type="text"/>
<input class="submit" type="submit">
</form>
<script>
function myFunction(event)
event.preventDefault();
//code here
</script>
【讨论】：
仅使用 javascript【参考方案20】：
对于纯 JavaScript，请改用 click 方法
<div id="loginForm">
<ul class="sign-in-form">
<li><input type="text" name="username"/></li>
<li><input type="password" name="password"/></li>
<li>
<input type="submit" onclick="loginForm()" value="click" />
</li>
</ul>
</div>
<script>
function loginForm()
document.getElementById("loginForm").click();
</script>
【讨论】：
【参考方案21】：刚刚找到了一个非常简单但有效的解决方案，方法是从我想阻止发布和刷新的部分中删除 <form></form>。
<select id="youId" name="yourName">
<select>
<option value="1</option>
<option value="2</option>
<option value="3</option>
</select>
<input id="formStockVal1" type="number"><br><br>
<form>
<button type="reset" id="stockCancel">Cancel</button>
<button type="reset" id="stockConfirm">Add</button>
</form>
这里只有按钮按应有的方式提交。
【讨论】：
删除您不想提交给服务器的字段的名称属性。 ***.com/a/12827917/458321【参考方案22】：只需像这样返回：
function validate()
var username=document.getElementById('username').value;
if(username=="")
return false;
if(username.length<5&&username.length<15)
alert("Length should between 5 to 15 characters");
return false;
return true;
body
padding: 0px;
margin:0px;
input
display: block;
margin-bottom:10px;
height:25px;
width:200px;
input[type="submit"]
margin:auto;
label
display:block;
margin-bottom:10px;
form
width:500px;
height:500px;
border:1px solid green;
padding:10px;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
position:absolute;
.labels
width: 35%;
box-sizing:border-box;
display: inline-block;
.inputs
width: 63%;
box-sizing:border-box;
padding:10px;
display: inline-block;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FORM VALIDATION</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<form action="#">
<div class="labels">
<label>Name</label>
<label>Email</label>
</div>
<div class="inputs">
<input type="text" name="username" id="username" required>
<input type="text" name="email" id="email" required>
</div>
<input type="submit" value="submit" onclick="return validate();">
</form>
</body>
</html>从 validate() 中返回真假；按需求发挥作用
【讨论】：
你应该给出提示或提供代码sn-p而不是这么大的代码【参考方案23】：<FORM NAME=frm1 ...>
Name: <input type=textbox name=txtName id=txtName>
<BR>
<input type=button value="Submit" onclick=Validate()>
<Script>
function Validate()
Msg = ""
// Check fields
if(frm1.txtName.value fails this)
Msg += "\n The Name Field is improper"
// Do the same for the rest of the form
if(Msg == "")
frm1.submit()
else
alert("Your form has errors\n" + Msg)
</SCRIPT>
【讨论】：
以上是关于提交时停止表单刷新页面的主要内容，如果未能解决你的问题，请参考以下文章