停止表单提交的 JavaScript 代码
Posted
技术标签:
【中文标题】停止表单提交的 JavaScript 代码【英文标题】：JavaScript code to stop form submission 【发布时间】：2012-01-29 16:08:06 【问题描述】：停止表单提交的一种方法是从 javascript 函数返回 false。
单击提交按钮时，将调用验证函数。我有一个表单验证案例。如果满足该条件，我将调用一个名为 returnToPreviousPage();
的函数function returnToPreviousPage()
window.history.back();
我正在使用 JavaScript 和 Dojo Toolkit。
而不是返回上一页，它提交表单。如何中止此提交并返回上一页？
【问题讨论】：
R U 确定这个函数正在调用？？尝试输入警报（'test'）；在 window.history 之前 是的，我确定；它被调用了。 How to prevent form from being submitted?的可能重复 【参考方案1】：可以使用函数的返回值来阻止表单提交
<form name="myForm" onsubmit="return validateMyForm();">
功能类似
<script type="text/javascript">
function validateMyForm()
if(check if your conditions are not satisfying)
alert("validation failed false");
returnToPreviousPage();
return false;
alert("validations passed");
return true;
</script>
如果上述代码不起作用，请在 Chrome 27.0.1453.116 m 的情况下，请将set the event handler's parameter's returnValue 字段设置为 false 以使其正常工作。
感谢 Sam 分享信息。
编辑：
感谢 Vikram 为 validateMyForm() 返回 false 提供的解决方法：
<form onsubmit="event.preventDefault(); validateMyForm();">
其中 validateMyForm() 是一个在验证失败时返回 false 的函数。关键是使用name事件。我们不能用于例如e.preventDefault()
【讨论】：
只是猜测：在最新版本的 Chrome 中对我不起作用。 任何返回false 的东西似乎都没有任何效果； Chrome 仍会提交表单。例如，onsubmit="return false;"。但是，将事件处理程序的参数的 returnValue 字段设置为 false 确实对我有用。
嗨 Sam / Hemant，您能否提供代码示例，说明如何将事件处理程序的参数的 returnValue 字段设置为 false。
我认为既然这是公认的答案，它可能应该告诉如何正确地做到这一点。我和 JackDev 一起想知道如何让它正常工作。照原样，这不工作
如果validateMyForm() 有错误return false 将无法到达。所以这可能会失败。几个小时后，我找到了一个可行的解决方案并将其发布在下面。【参考方案2】：
使用阻止默认
道场工具包
dojo.connect(form, "onsubmit", function(evt)
evt.preventDefault();
window.history.back();
);
jQuery
$('#form').submit(function (evt)
evt.preventDefault();
window.history.back();
);
原版 JavaScript
if (element.addEventListener)
element.addEventListener("submit", function(evt)
evt.preventDefault();
window.history.back();
, true);
else
element.attachEvent('onsubmit', function(evt)
evt.preventDefault();
window.history.back();
);
【讨论】：
由于很多原因，我会推荐 event.preventDefault() 而不是 return false，这应该是最佳答案：blog.nmsdvid.com/… 好答案。比选择的要好。 很好，但是您将在哪里执行 OP 想要的验证？ @acidjazz 但是在防止默认后如何访问表单数据？ @Sahand @codeat30 您可以访问活动target。【参考方案3】：
目前以下工作（在 Chrome 和 Firefox 中测试）：
<form onsubmit="event.preventDefault(); validateMyForm();">
其中 validateMyForm() 是一个在验证失败时返回 false 的函数。关键是使用名称event。我们不能用于例如e.preventDefault().
【讨论】：
【参考方案4】：只需使用简单的button 而不是提交按钮。并调用一个 JavaScript 函数来处理表单提交：
<input type="button" name="submit" value="submit" onclick="submit_form();"/>
script 标签内的函数：
function submit_form()
if (conditions)
document.forms['myform'].submit();
else
returnToPreviousPage();
你也可以试试window.history.forward(-1);
【讨论】：
我喜欢这种方法，因为它允许我的用例，回调。 这样可以防止使用回车键来提交表单。此外，required 等新的 html5 属性也不起作用。【参考方案5】：
基于@Vikram Pudi 的回答，我们也可以用纯 Javascript 来做这样的事情
<form onsubmit="submitForm(event)">
<input type="text">
<input type="submit">
</form>
<script type="text/javascript">
function submitForm(event)
event.preventDefault();
</script>
【讨论】：
【参考方案6】：做一件简单的事有很多艰难的方法：
<form name="foo" onsubmit="return false">
【讨论】：
这个准确的答案（好的，不准确，因为你的答案缺少分号）是在 8 个月前提交的，并且有充分的理由投反对票。这在大部分的情况下都有效。但并非在所有浏览器所有的时间。 我没有说你需要分号；我指出，这就是您的答案与很多较旧的答案之间的所有不同之处。您现在要求我指出哪些浏览器不支持它（我从未说过有，我只是指出它并不总是有效），这一事实证明您仍然还没读完整页。 我通常不检查否决票，但我不知道人们否决了正确的代码。从技术上讲，分号是多余的，所以它是错误的。你说“你的缺少分号”暗示它是需要的，这是错误的。你说它“不会总是有效”，但你不能指出它不能工作的单个案例或浏览器？这是合理的逻辑？这是正确的代码。所以除非你能指出它不起作用的情况，否则你根本没有任何意义。 这怎么没有更多的赞成票？与其他示例相比，它要简洁得多。 可能是因为标题与这个人实际要求的不符。【参考方案7】：你所有的答案都可以解决问题。
最后，这对我有用：（如果您没有选择至少一个复选框项目，它会发出警告并停留在同一页面上）
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form name="helloForm" action="HelloWorld" method="GET" onsubmit="valthisform();">
<br>
<br><b> MY LIKES </b>
<br>
First Name: <input type="text" name="first_name" required>
<br />
Last Name: <input type="text" name="last_name" required />
<br>
<input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
<input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
<input type="radio" name="modifyValues" value="asis" required="required" checked="checked">Do not convert <br>
<br>
<input type="checkbox" name="c1" value="maths" /> Maths
<input type="checkbox" name="c1" value="physics" /> Physics
<input type="checkbox" name="c1" value="chemistry" /> Chemistry
<br>
<button onclick="submit">Submit</button>
<!-- input type="submit" value="submit" / -->
<script>
<!---
function valthisform()
var checkboxs=document.getElementsByName("c1");
var okay=false;
for(var i=0,l=checkboxs.length;i<l;i++)
if(checkboxs[i].checked)
okay=true;
break;
if (!okay)
alert("Please check a checkbox");
event.preventDefault();
else
-->
</script>
</form>
</body>
</html>
【讨论】：
也为我工作。【参考方案8】：我建议不要使用onsubmit，而是在脚本中附加一个事件。
var submit = document.getElementById("submitButtonId");
if (submit.addEventListener)
submit.addEventListener("click", returnToPreviousPage);
else
submit.attachEvent("onclick", returnToPreviousPage);
然后使用preventDefault()（或returnValue = false 用于旧版浏览器）。
function returnToPreviousPage (e)
e = e || window.event;
// validation code
// if invalid
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
【讨论】：
你能解释一下为什么不使用onsubmit吗？
也许这只是偏好，但我发现如果所有事件侦听器都使用JS 而不是HTML 使用属性附加，则更容易理解网页的功能。这样你在阅读别人的代码时就不需要来回跳了
如果有人在其中一个输入上按下回车键而不是单击按钮怎么办？一般来说，ii仍然提交......【参考方案9】：
假设您有一个类似于此的表单
<form action="membersDeleteAllData.html" method="post">
<button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>
这是 confirmAction 函数的 javascript
<script type="text/javascript">
function confirmAction(e)
var confirmation = confirm("Are you sure about this ?") ;
if (!confirmation)
e.preventDefault() ;
returnToPreviousPage();
return confirmation ;
</script>
这个适用于 Firefox、Chrome、Internet Explorer(edge)、Safari 等。
如果不是这样，请告诉我
【讨论】：
preventDefault() 和returnToPreviousPage() 的组合完美而优雅。它会中断正常操作，就像您设计任何异常捕获器一样工作。 +1。【参考方案10】：
例如，如果您在表单上有提交按钮，为了停止它的传播，只需编写 event.preventDefault();在单击提交按钮或输入按钮时调用的函数中。
【讨论】：
【参考方案11】：Hemant 和 Vikram 的答案在 Chrome 中并不完全适合我。 event.preventDefault();无论是否通过验证，脚本都会阻止页面提交。相反，我不得不移动 event.preventDefault();进入if语句如下：
if(check if your conditions are not satisfying)
event.preventDefault();
alert("validation failed false");
returnToPreviousPage();
return false;
alert("validations passed");
return true;
感谢 Hemant 和 Vikram 让我走上正轨。
【讨论】：
也为我工作。谢谢。【参考方案12】：简单地做......
<form>
<!-- Your Input Elements -->
</form>
这里是你的 JQuery
$(document).on('submit', 'form', function(e)
e.preventDefault();
//your code goes here
//100% works
return;
);
【讨论】：
你在这里用过jquery吗？【参考方案13】：禁用提交按钮也有助于阻止表单提交。
<input style="display:none" type="submit" disabled>
【讨论】：
以上是关于停止表单提交的 JavaScript 代码的主要内容，如果未能解决你的问题，请参考以下文章
Javascript - 根据ajax响应停止表单提交[重复]
用于停止 WordPress 注册表单提交的 Javascript（电子邮件验证）