关于表单自动提交的问题及解决方式

Posted 2020-09-24 轻尘如风

在js中，我们常常会用到表单提交，但小编今天遇到一个问题：在删除所有引用的js文件之后，页面还是刷新

最后发现问题如下：

在js中，使用表单提交，即使你不写$("XXX").submit()也会使得表单提交，那如何寻找这种问题解决方式呢？

 

总结问题及解决方式如下:

(1)使用onsubmit()阻止表单提交，但是会有一个触发问题，onsubmit 事件只有在表单中的确认按钮被点击时发生触发。

   原因如下：

          先看一段代码：                        

 1 <form action="index.jsp" method="post" onsubmit="submitTest();"> 
 2 <INPUT value="www"> 
 3 <input type="submit" value="submit"> 
 4 </form> 
 5 
 6 <SCRIPT LANGUAGE="javascript"> 
 7 <!-- 
 8 function submitTest() { 
 9 // 一些逻辑判断return false; 
10 } 
11 //--></SCRIPT> 

 

          在点击该submit按钮时并没有发生触发事件，原因为何？应该在onsubmit中加上return submitTest()；onsubmit属性就像是<form>这个html对象的一个方法名，其值（一字符串）就是其方法体，默认返回true； 

submitTest()虽然返回false，但我们只执行了此函数，没有对其结果进行任何处理,而onsubmit="return submitTest()利用到了它的返回值，达到了预期效果。

 

 

(2)使用return false来阻止表单的默认行为

    请看如下代码：

 1 <form name="loginForm" action="login.aspx" method="post">
 2  <button type="submit" value="Submit" id="submit">Submit</button>
 3 </form>
 4  
 5 <script>
 6  var submitBtn = document.getElementById("submit");
 7  
 8  submitBtn.onclick = function (event) {
 9   alert("preventDefault!");
10   return false;
11  };
12 </script>

 

 

 

  最后：事件处理函数返回false的问题，在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为. 

 

(3)使用preventDefault()来阻止浏览器默认提交表单行为

在标准浏览器中，阻止浏览器默认行为使用event.preventDefault()，而在IE6~8中，使用returnValue属性来实现。

请看如下代码:

 1 <form name="loginForm" action="login.aspx" method="post">
 2  <button type="submit" value="Submit" id="submit">Submit</button>
 3 </form>
 4  
 5 <script>
 6  var submitBtn = document.getElementById("submit");
 7  
 8  submitBtn.onclick = function (event) {
 9   alert("preventDefault!");
10   var event = event || window.event;
11   event.preventDefault(); // 兼容标准浏览器
12   window.event.returnValue = false; // 兼容IE6~8
13  };
14 </script>