JavaScript代码停止表单提交

205

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

单击提交按钮后，将调用验证功能。我有一个表单验证案例。如果满足该条件，我将调用一个名为returnToPreviousPage（）的函数。

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

我正在使用JavaScript和Dojo Toolkit。

而不是返回上一页，它提交了表单。如何终止提交并返回上一页？

javascript  html  forms 
— 穆罕默德·伊姆兰·塔里克
source
RU确定该函数正在调用吗？尝试设置警报（“测试”）；在window.history之前
— samirprogrammer
是的，我敢肯定; 它被称为。
— 穆罕默德·伊姆兰·塔里克
8
— TJ

Answers:

291

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

<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字段设置为false，以使其正常工作。

感谢Sam共享信息。

编辑：

感谢Vikram的解决方法，如果validateMyForm（）返回false：

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

其中validateMyForm（）是一个函数，如果验证失败，该函数将返回false。关键是使用名称事件。我们不能用于egepreventDefault（）

— 赫曼特·梅塔莉亚
source
1
只是一个猜测：在最新版本的Chrome中，它不适用于我。
— 山姆
5
任何返回的东西false似乎都没有任何作用。Chrome仍会提交表单。例如，onsubmit="return false;"。但是，将事件处理程序的参数returnValue字段设置false为对我有用。
— 2013年
3
嗨，Sam / Hemant，请您提供代码示例，说明如何将事件处理程序的参数的returnValue字段设置为false。
— JackDev
2
我认为，既然这是公认的答案，那么它可能应该说明如何正确执行此操作。我和JackDev一起，想知道如何使它正常工作。由于是，这并没有工作
— 排排坐
1
如果validateMyForm()有错误return false将不会到达。因此，这可能会失败。几个小时后，我找到了一个可行的解决方案，并将其发布在下面。
— Vikram Pudi
116

使用防止默认

Dojo工具包

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();
    });
}
— 格雷格·吉达
source
3
由于很多原因，我建议event.preventDefault（）超过return false，这应该是最高答案：blog.nmsdvid.com/…–
— acidjazz
1
好答案。比所选的更好。
— 阿妮·梅农
2
很好，但是您将在哪里执行OP所需的验证？
— Sahand
1
@acidjazz但是，防止默认设置后如何访问表单数据？
— CodeAt30
@Sahand @ codeat30您可以访问事件target。
— 艾德里安
49

到目前为止，以下各项有效（在Chrome和Firefox中进行了测试）：

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

validateMyForm（）是一个函数，false如果验证失败，该函数将返回。关键是要使用名称event。我们不能用于e.preventDefault()。

— 维克拉姆·普迪（Vikram Pudi）
source
15

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

— dku.rajkumar
source
我喜欢这种方法，因为它允许我的用例，即回调。
— 埃迪
12
这样可以防止使用Enter键提交表单。此外，新的HTML5属性（例如）required将不起作用。
— 2013年
8

许多简单的方法可以轻松完成一件事情：

<form name="foo" onsubmit="return false">
— 丹尼尔
source
3
这个确切的答案（好吧，不确切，因为您缺少分号）是在8个月前提交的，并且有充分的理由投反对票。这在大多数情况下都有效。但并非一直都在所有浏览器上。
— Auspex
3
我不是说你需要分号；我指出，这是所有这是你的答案和之间的不同多旧的一个。您现在要我指出哪些浏览器不支持该事实（我从未说过有任何浏览器，我只是指出它并不总是可以工作），这一事实证明您仍然没有阅读整个页面。
— Auspex
2
我通常不检查否决票，除非我不知道人们在否决正确的代码。从技术上讲，分号是多余的，所以这是错误的。您说“您缺少分号”表示需要它，这是错误的。您说它“永远不会起作用”，但是您不能指出一个单独的案例或浏览器无法起作用？这是合理的逻辑吗？这是正确的代码。因此，除非您指出无法使用的情况，否则您根本没有意义。
— Danial '10
怎么没有更多的赞誉呢？与其他示例相比，它要简洁得多。
— Sal Alturaigi
可能是因为标题与该人的实际要求不符。
— Danial
6

您所有的答案都可以使用。

最终，这对我有用：（如果您没有选择至少一个复选框，它会警告并停留在同一页面上）

<!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>
— 格巴
source
也为我工作。
— chetan
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>
— 潘文林
source
3

我建议不要使用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;
  }
}
— 艾萨克·阿布拉莫维茨（Isaac Abramowitz）
source
您能解释一下为什么不使用onsubmit吗？
— theFreedomBanana '18
也许这只是首选项，但是我发现如果所有事件侦听器都使用属性JS而不是HTML属性进行附加，则更易于理解网页的功能。你并不需要通过这种方式来来回跳转尽可能多的在阅读别人的代码
— 艾萨克·阿布拉莫维茨
如果有人在其中一个输入上按下Enter键而不是点击按钮怎么办？一般而言，ii仍然提交...
— bluejayke，
1

假设您有一个与此类似的表格

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

如果不是这种情况，请通知我

— 毛里西奥·格拉西亚·古铁雷斯
source
1
的结合preventDefault()和returnToPreviousPage()完美优雅。就像您要设计任何异常捕获程序一样，它会中断正常操作。+1。
— 1934286
1

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使我走上正确的道路。

— Jesperai
source
也为我工作。谢谢。
— ivbtar
0

简单地做...。

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

这是您的JQuery

$(document).on('submit', 'form', function(e){
    e.preventDefault();
    //your code goes here
    //100% works
    return;
});
— 马蒂·戈伊拉（Matee Gojra）
source
1
u您在这里使用过jQuery吗？
— Selva Ganapathi
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.