JavaScript代码停止表单提交
停止表单提交的一种方法是从JavaScript函数返回false。
当提交button被点击时,一个validationfunction被调用。 我有一个表单validation的情况。 如果满足这个条件,我调用一个名为returnToPreviousPage()的函数;
function returnToPreviousPage() { window.history.back(); } 我正在使用JavaScript和Dojo Toolkit 。
而是回到上一页,它提交表单。 我如何中止这个提交并返回到前一页?
您可以使用函数的返回值来防止表单提交
 <form name="myForm" onsubmit="return validateMyForm();"> 
和function一样
 <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分享信息。
编辑:
如果validateMyForm()返回false,则感谢Vikram提供的解决方法:
  <form onsubmit="event.preventDefault(); validateMyForm();"> 
其中validateMyForm()是一个函数,如果validation失败则返回false。 关键是要使用名称事件。 我们不能使用egepreventDefault()
使用防止默认
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(); }); } 
以下工作截至目前(在Chrome和Firefox中testing):
 <form onsubmit="event.preventDefault(); validateMyForm();"> 
 其中validateMyForm()是一个在validation失败时返回false的函数。 关键是要使用名称event 。 我们不能用于例如e.preventDefault() 。 
 只需使用一个简单的button而不是提交button。 并调用一个JavaScript函数来处理表单提交: 
 <input type="button" name="submit" value="submit" onclick="submit_form();"/> 
  script标记内的function: 
 function submit_form() { if (conditions) { document.forms['myform'].submit(); } else { returnToPreviousPage(); } } 
 你也可以尝试window.history.forward(-1); 
所有的答案给了一些工作。
最后,这为我工作:(如果你不select至less一个checkbox项目,它会警告并保持在同一页面)
 <!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> 
很多困难的事情做一件容易的事情:
 <form name="foo" onsubmit="return false"> 
比方说你有一个类似于这个的forms
 <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(边缘),Safari等。
如果情况并非如此,请告诉我
Chrome浏览器中Hemant和Vikram的回答并不完全适合我。 event.preventDefault(); 脚本阻止页面提交,无论通过还是未通过validation。 相反,我不得不移动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让我走上正轨。
例如,如果你在表单上提交button,为了停止它的传播,只需写下event.preventDefault(); 在点击提交button或inputbutton被调用的function中。
只是使用下面的代码,它会正常工作
 <form onsubmit="return false;" >