停止表单提交的javascript代码

falq053o  于 2021-09-13  发布在  Java
关注(0)|答案(12)|浏览(790)

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

  1. function returnToPreviousPage() {
  2.     window.history.back();
  3. }

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

JavaScriptHtmlforms

12条答案

按热度按时间
qrjkbowd

qrjkbowd1#

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

  1. <form name="myForm" onsubmit="return validateMyForm();">

和功能类似

  1. <script type="text/javascript">
  2. function validateMyForm()
  3. {
  4.   if(check if your conditions are not satisfying)
  5.   { 
  6.     alert("validation failed false");
  7.     returnToPreviousPage();
  8.     return false;
  9.   }
  11.   alert("validations passed");
  12.   return true;
  13. }
  14. </script>

在chrome 27.0.1453.116 m的情况下，如果上述代码不起作用，请将事件处理程序的参数returnvalue字段设置为false以使其起作用。
谢谢sam分享信息。
编辑：
感谢vikram针对if validatemyform（）返回false的解决方法：

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

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

展开查看全部
赞(0）分享  回复(0）举报  2021-09-13
dxpyg8gm

dxpyg8gm2#

使用防止默认值
dojo工具包

  1. dojo.connect(form, "onsubmit", function(evt) {
  2.     evt.preventDefault();
  3.     window.history.back();
  4. });

jquery

  1. $('#form').submit(function (evt) {
  2.     evt.preventDefault();
  3.     window.history.back();
  4. });

香草javascript

  1. if (element.addEventListener) {
  2.     element.addEventListener("submit", function(evt) {
  3.         evt.preventDefault();
  4.         window.history.back();
  5.     }, true);
  6. }
  7. else {
  8.     element.attachEvent('onsubmit', function(evt){
  9.         evt.preventDefault();
  10.         window.history.back();
  11.     });
  12. }
展开查看全部
赞(0）分享  回复(0）举报  2021-09-13
lnvxswe2

lnvxswe23#

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

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

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

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

js4nwp544#

只需使用一个简单的 button 而不是提交按钮。并调用javascript函数来处理表单提交：

  1. <input type="button" name="submit" value="submit" onclick="submit_form();"/>

内部功能 script 标签：

  1. function submit_form() {
  2.     if (conditions) {
  3.         document.forms['myform'].submit();
  4.     }
  5.     else {
  6.         returnToPreviousPage();
  7.     }
  8. }

你也可以试试 window.history.forward(-1);

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

ca1c2owp5#

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

  1. <form onsubmit="submitForm(event)">
  2.     <input type="text">
  3.     <input type="submit">
  4. </form>
  6. <script type="text/javascript">
  8.     function submitForm(event){
  9.         event.preventDefault();
  11.     }
  12. </script>
赞(0）分享  回复(0）举报  2021-09-13
voj3qocg

voj3qocg6#

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

  1. <form name="foo" onsubmit="return false">
赞(0）分享  回复(0）举报  2021-09-13
wsxa1bj1

wsxa1bj17#

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.     </head>
  5.     <body>
  6.         <form name="helloForm" action="HelloWorld" method="GET"  onsubmit="valthisform();">
  7.             <br>
  8.             <br><b> MY LIKES </b>
  9.             <br>
  10.             First Name: <input type="text" name="first_name" required>
  11.             <br />
  12.             Last Name: <input type="text" name="last_name"  required />
  13.             <br>
  14.             <input type="radio" name="modifyValues" value="uppercase" required="required">Convert to uppercase <br>
  15.             <input type="radio" name="modifyValues" value="lowercase" required="required">Convert to lowercase <br>
  16.             <input type="radio" name="modifyValues" value="asis"      required="required" checked="checked">Do not convert <br>
  17.             <br>
  18.             <input type="checkbox" name="c1" value="maths"     /> Maths
  19.             <input type="checkbox" name="c1" value="physics"   /> Physics
  20.             <input type="checkbox" name="c1" value="chemistry" /> Chemistry
  21.             <br>
  23.             <button onclick="submit">Submit</button>
  25.             <!-- input type="submit" value="submit" / -->
  26.             <script>
  27.                 <!---
  28.                 function valthisform() {
  29.                     var checkboxs=document.getElementsByName("c1");
  30.                     var okay=false;
  31.                     for(var i=0,l=checkboxs.length;i<l;i++) {
  32.                         if(checkboxs[i].checked) {
  33.                             okay=true;
  34.                             break;
  35.                         }
  36.                     }
  37.                     if (!okay) { 
  38.                         alert("Please check a checkbox");
  39.                         event.preventDefault();
  40.                     } else {
  41.                     }
  42.                 }
  43.                 -->
  44.             </script>
  45.         </form>
  46.     </body>
  47. </html>
展开查看全部
赞(0）分享  回复(0）举报  2021-09-13
kadbb459

kadbb4598#

我建议不要使用 onsubmit 而是在脚本中附加一个事件。

  1. var submit = document.getElementById("submitButtonId");
  2. if (submit.addEventListener) {
  3.   submit.addEventListener("click", returnToPreviousPage);
  4. } else {
  5.   submit.attachEvent("onclick", returnToPreviousPage);
  6. }

然后使用 preventDefault() （或 returnValue = false 对于较旧的浏览器）。

  1. function returnToPreviousPage (e) {
  2.   e = e || window.event;
  3.   // validation code
  5.   // if invalid
  6.   if (e.preventDefault) {
  7.     e.preventDefault();
  8.   } else {
  9.     e.returnValue = false;
  10.   }
  11. }
展开查看全部
赞(0）分享  回复(0）举报  2021-09-13
3htmauhk

3htmauhk9#

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

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

vohkndzv10#

就这么做吧。。。。

  1. <form>
  2. <!-- Your Input Elements -->
  3. </form>

这是您的jquery

  1. $(document).on('submit', 'form', function(e){
  2.     e.preventDefault();
  3.     //your code goes here
  4.     //100% works
  5.     return;
  6. });
赞(0）分享  回复(0）举报  2021-09-13
t9eec4r0

t9eec4r011#

假设你有一个类似的表单

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

下面是confirmation函数的javascript

  1. <script type="text/javascript">
  2.     function confirmAction(e)
  3.     {
  4.         var confirmation = confirm("Are you sure about this ?") ;
  6.         if (!confirmation)
  7.         {
  8.             e.preventDefault() ;
  9.             returnToPreviousPage();
  10.         }
  12.         return confirmation ;
  13.     }
  14. </script>

这一款适用于firefox、chrome、internet explorer（edge）、safari等。
如果不是这样，请告诉我

展开查看全部
赞(0）分享  回复(0）举报  2021-09-13
9gm1akwq

9gm1akwq12#

赫曼特和维克拉姆的回答在chrome上对我来说并不完全有效。event.preventdefault（）；无论验证是否通过，脚本都阻止页面提交。相反，我必须移动事件；输入if语句，如下所示：

  1. if(check if your conditions are not satisfying) 
  2.     { 
  3.     event.preventDefault();
  4.     alert("validation failed false");
  5.     returnToPreviousPage();
  6.     return false;
  7.     }
  8.     alert("validations passed");
  9.     return true;
  10.     }

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

赞(0）分享  回复(0）举报  2021-09-13
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com