停止表单提交的 JavaScript 代码

Posted

技术标签:

【中文标题】停止表单提交的 JavaScript 代码【英文标题】:JavaScript code to stop form submission 【发布时间】:2022-01-22 08:47:51 【问题描述】:

停止表单提交的一种方法是从您的 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】:

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

&lt;input style="display:none" type="submit" disabled&gt;

【讨论】:

以上是关于停止表单提交的 JavaScript 代码的主要内容,如果未能解决你的问题,请参考以下文章

Javascript - 根据ajax响应停止表单提交[重复]

用于停止 WordPress 注册表单提交的 Javascript(电子邮件验证)

使用 JavaScript 提交 FORM 后如何停止打开 ACTION 页面

在返回时停止表单提交

名称为提交的按钮停止触发表单的提交事件? [复制]

javascript 表单提交传值 紧急