停止表单提交的 JavaScript 代码
停止表单提交的一种方法是从 JavaScript 函数返回 false。
单击提交按钮时，将调用验证函数。我有一个表单验证案例。如果满足该条件，我将调用一个名为 returnToPreviousPage(); 的函数；
function returnToPreviousPage() {
window.history.back();
}
我正在使用 JavaScript 和 Dojo Toolkit。
而是返回上一页，它提交表单。如何中止此提交并返回上一页？
可以使用函数的返回值来阻止表单提交
<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 以使其正常工作。
感谢山姆分享信息。
编辑 ：
感谢 Vikram 为 validateMyForm() 返回 false 的解决方法：
<form onsubmit="event.preventDefault(); validateMyForm();">
其中 validateMyForm() 是一个在验证失败时返回 false 的函数。关键是使用name事件。我们不能用于 egepreventDefault()
使用阻止默认值
道场工具包
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();
});
}
target。
截至目前，以下工作（在 Chrome 和 Firefox 中测试）：
<form onsubmit="event.preventDefault(); validateMyForm();">
其中 validateMyForm() 是一个在验证失败时返回 false 的函数。关键点是使用名称 event。我们不能用于例如 e.preventDefault()。
基于@Vikram Pudi 的回答，我们也可以用纯 Javascript 来做这样的事情
<form onsubmit="submitForm(event)">
<input type="text">
<input type="submit">
</form>
<script type="text/javascript">
function submitForm(event){
event.preventDefault();
}
</script>
只需使用一个简单的 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）也不起作用。
做一件简单的事有很多困难的方法：
<form name="foo" onsubmit="return false">
你所有的答案都提供了一些可以使用的东西。
最后，这对我有用：（如果您没有选择至少一个复选框项目，它会发出警告并停留在同一页面上）
<!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>
我建议不要使用 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 附加，则更容易理解网页的功能。这样你在阅读别人的代码时就不需要来回跳了
假设您有一个类似于此的表格
<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。
例如，如果您在表单上有提交按钮，为了停止它的传播，只需编写 event.preventDefault();在单击提交按钮或输入按钮时调用的函数中。
干脆做吧......
<form>
<!-- Your Input Elements -->
</form>
这里是你的 JQuery
$(document).on('submit', 'form', function(e){
e.preventDefault();
//your code goes here
//100% works
return;
});
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 让我走上正轨。
禁用提交按钮也有助于防止表单提交。
<input style="display:none" type="submit" disabled>
尽管看起来很明显，但应该注意的是，如果您使用阻止默认值阻止提交，如果验证顺利进行，您还必须提交您的表单。我在下面提供了一个完整的示例来验证文档类型，然后提交是否正确的文档类型。
<h2>Document Upload</h2>
<script>
var CanContinue = false;
function validateMyForm()
{
if(CanContinue == false)
{
alert("You must upload a PDF, PNG, or JPG of your document.");
return false;
}
document.getElementById("myForm").submit();
return true;
}
function getFileNameWithExt(event) {
if (!event || !event.target || !event.target.files || event.target.files.length === 0) {
return;
}
const name = event.target.files[0].name;
const lastDot = name.lastIndexOf('.');
const fileName = name.substring(0, lastDot);
const ext = (name.substring(lastDot + 1)).toUpperCase();
if (ext =="JPG") {
extension.value = "image/jpeg";
CanContinue = true;
} else if (ext =="JPEG") {
extension.value = "image/jpeg";
CanContinue = true;
} else if (ext =="PNG") {
extension.value = "image/png";
CanContinue = true;
} else if (ext =="PDF") {
extension.value = "application/pdf";
CanContinue = true;
} else {
alert("You must upload a PDF, PNG, or JPG of your document.");
CanContinue = false;
}
outputfile.value = fileName;
}
</script>
<form method="post" id="myForm" action="/wheregoing" enctype="multipart/form-data" onsubmit="event.preventDefault(); validateMyForm();">
Please upload a JPG, PNG, or PDF of the front of the document.
<input id='inputfile' type="file" name="dafile" onChange='getFileNameWithExt(event)' required>
<input id='extension' type='hidden' name='ContentType' value="">
<input type="submit">
</form>
false的东西似乎都没有任何效果； Chrome 仍会提交表单。例如，onsubmit="return false;"。但是，将事件处理程序的参数的returnValue字段设置为false对我有用。validateMyForm()有错误return false将无法到达。所以这可能会失败。几个小时后，我找到了一个可行的解决方案并将其发布在下面。