停止表单提交的javascript代码

falq053o 于 2021-09-13 发布在 Java

关注(0)|答案(12)|浏览(701)

停止表单提交的一种方法是从javascript函数返回false。
单击submit按钮时，将调用验证函数。我有一个表单验证案例。如果满足该条件，我将调用名为returntopreviouspage（）的函数；

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

我正在使用javascript和dojo工具包。
与其返回上一页，不如提交表单。如何中止此提交并返回上一页？

JavaScript Html forms

来源：https://stackoverflow.com/questions/68477524/input-value-change-for-a-while-and-then-disappear

12条答案

按热度按时间

qrjkbowd1#

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

<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针对if validatemyform（）返回false的解决方法：

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

其中validatemyform（）是一个函数，如果验证失败，它将返回false。关键点是使用名称事件。我们不能用于例如e.preventdefault（）

赞(0）回复(0）举报 2021-09-13

dxpyg8gm2#

使用防止默认值
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();
    });
}

赞(0）回复(0）举报 2021-09-13

lnvxswe23#

到目前为止，以下功能可以正常工作（在chrome和firefox中测试）：

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

其中validatemyform（）是一个返回 false 如果验证失败。关键是要使用这个名字 event . 例如，我们不能使用。 e.preventDefault() .

赞(0）回复(0）举报 2021-09-13

js4nwp544#

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

赞(0）回复(0）举报 2021-09-13

ca1c2owp5#

基于@vikram pudi-answer，我们也可以使用纯javascript实现这一点

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

<script type="text/javascript">

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

    }
</script>

赞(0）回复(0）举报 2021-09-13

voj3qocg6#

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

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

赞(0）回复(0）举报 2021-09-13

wsxa1bj17#

你所有的答案都给了我们一些有用的东西。
最后，这对我很有用：（如果你没有选择至少一个复选框项目，它会发出警告并保持在同一页中）

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

赞(0）回复(0）举报 2021-09-13

kadbb4598#

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

赞(0）回复(0）举报 2021-09-13

3htmauhk9#

e、 g如果表单上有submit按钮，为了停止其传播，只需编写event.preventdefault（）；在单击“提交”按钮或“输入”按钮时调用的函数中。

赞(0）回复(0）举报 2021-09-13

vohkndzv10#

就这么做吧。。。。

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

这是您的jquery

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

赞(0）回复(0）举报 2021-09-13

t9eec4r011#

假设你有一个类似的表单

<form action="membersDeleteAllData.html" method="post">
    <button type="submit" id="btnLoad" onclick="confirmAction(event);">ERASE ALL DATA</button>
</form>

下面是confirmation函数的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等。
如果不是这样，请告诉我

赞(0）回复(0）举报 2021-09-13

9gm1akwq12#

赫曼特和维克拉姆的回答在chrome上对我来说并不完全有效。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;
    }

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

赞(0）回复(0）举报 2021-09-13

我来回答

停止表单提交的javascript代码

12条答案

相关问题

热门标签

最新问答