首页 > 代码库 > 关于表单自动提交的问题及解决方式

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

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

最后发现问题如下:

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

 

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

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

   原因如下:

          先看一段代码:                        

 1 <form action="index.jsp" method="post" onsubmit="submitTest();"> 
 2 <INPUT value="http://www.mamicode.com/www"> 
 3 <input type="submit" value="http://www.mamicode.com/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="http://www.mamicode.com/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="http://www.mamicode.com/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 = http://www.mamicode.com/false; // 兼容IE6~8
13  };
14 </script>

 

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