停止表单提交的JavaScript代码

停止表单提交的一种方法是从JavaScript函数返回false。

当单击提交按钮时，将调用验证函数。我有一个表单验证的案例。如果满足这个条件，我调用一个名为returnToPreviousPage ();的函数

function returnToPreviousPage() {
window.history.back();
}

我使用JavaScript和Dojo Toolkit。

它不是返回到前一页，而是提交表单。我如何终止这次提交并返回到上一页?

725298 次浏览
小开

使用防止默认

Dojo Toolkit

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();
});
}
小开

只需使用简单的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);

小开
最佳答案

您可以使用该函数的返回值来阻止表单提交

<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的情况下，如果上述代码不工作，请设置事件处理程序参数的returnValue字段为假，以使其工作。

谢谢Sam分享信息。

编辑:

感谢Vikram的解决方法，如果validateMyForm()返回false:

 <form onsubmit="event.preventDefault(); validateMyForm();">

其中validateMyForm()是一个函数，如果验证失败则返回false。关键是使用名称事件。我们不能使用例如e.c epreventdefault ()

小开

以下是目前为止的工作(在Chrome和Firefox中测试):

<form onsubmit="event.preventDefault(); validateMyForm();">

其中validateMyForm()是一个函数，如果验证失败则返回false。关键是要使用名称event。不能用于例如e.preventDefault()。

小开

假设你有一个类似的形式

<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等。

如果不是这样，请告诉我

小开

你所有的回答都给了我一些参考。

最后，这为我工作:(如果你不选择至少一个复选框项目，它警告并保持在同一页面)

<!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>
小开

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;
}

感谢赫曼特和维克拉姆让我走上正轨。

小开

例如，如果你在表单上有提交按钮，为了阻止它的传播，只需编写event.preventDefault();在点击提交按钮或进入按钮时调用的函数中。

小开

做一件简单的事情有很多困难的方法:

<form name="foo" onsubmit="return false">
小开

简单地去做....

<form>
<!-- Your Input Elements -->
</form>

这就是你的JQuery

$(document).on('submit', 'form', function(e){
e.preventDefault();
//your code goes here
//100% works
return;
});
小开

我建议不要使用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;
}
}
小开

基于@Vikram Pudi的回答，我们也可以用纯Javascript做到这一点

<form onsubmit="submitForm(event)">
<input type="text">
<input type="submit">
</form>


<script type="text/javascript">


function submitForm(event){
event.preventDefault();




}
</script>
小开

禁用提交按钮也可以帮助阻止表单提交。

<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>

提交答案