用于停止表单提交的 JavaScript 代码答案

【问题标题】：JavaScript code to stop form submission用于停止表单提交的 JavaScript 代码
【发布时间】：2022-12-21 17:13:27
【问题描述】：

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

单击提交按钮时，将调用验证函数。我有一个表单验证案例。如果满足该条件，我将调用一个名为回到上一页（）;

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

我正在使用 JavaScript 和 Dojo Toolkit。

它不是返回到上一页，而是提交表单。我怎样才能中止这次提交并返回到上一页？

【问题讨论】：

R U 确定这个函数正在调用？？尝试发出警报（“测试”）；在 window.history 之前
是的，我敢肯定;它被称为。
How to prevent form from being submitted? 的可能重复项

标签： javascript html forms

【解决方案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 以使其工作。

感谢山姆分享信息。

编辑：

感谢 Vikram 在 validateMyForm() 返回 false 时的解决方法：

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

其中 validateMyForm() 是一个函数，如果验证失败则返回 false。关键点是使用名称事件。我们不能使用 for e.g. 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();
});

查询

$('#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。我们不能使用 for e.g. e.preventDefault()。

【讨论】：

【解决方案4】：

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

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

<script type="text/javascript">

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


    }
</script>

【讨论】：

【解决方案5】：

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

【讨论】：

我喜欢这种方法，因为它允许我的用例回调。
这样可以防止使用回车键来提交表单。此外，新的 HTML5 属性（例如 required）将不起作用。

【解决方案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 使用属性附加，则更容易理解网页的功能。这样你就不需要在阅读别人的代码时来回跳转了
如果有人在其中一个输入上按下回车而不是单击按钮怎么办？一般来说，我仍然提交......

【解决方案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】：

简单地做......

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

这是你的 JQuery

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

【讨论】：

你在这里使用过 jquery 吗？

【解决方案12】：

禁用提交按钮也有助于防止表单提交。

<input style="display:none" type="submit" disabled>

【讨论】：

天才解答在这里！

【解决方案13】：

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 让我走上正轨。

【讨论】：

也为我工作。谢谢。

【解决方案14】：

尽管这看起来很明显，但应该注意的是，如果您使用防止默认阻止提交，那么如果验证顺利进行，您还必须提交表单。我在下面提供了一个完整的示例来验证文档类型，然后提交正确的文档类型。

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

【讨论】：