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

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

最后发现问题如下：

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

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

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

   原因如下：

          先看一段代码：                        

<form action="index.jsp" method="post" onsubmit="submitTest();"> 
<INPUT value="www"> 
<input type="submit" value="submit"> 
</form> 

<SCRIPT LANGUAGE="JavaScript"> 
<!-- 
function submitTest() { 
// 一些逻辑判断return false; 
} 
//--></SCRIPT> 

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

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

 

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

    请看如下代码：

<form name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>
 
<script>
 var submitBtn = document.getElementById("submit");
 
 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  return false;
 };
</script>

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

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

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

请看如下代码:

<form name="loginForm" action="login.aspx" method="post">
 <button type="submit" value="Submit" id="submit">Submit</button>
</form>
 
<script>
 var submitBtn = document.getElementById("submit");
 
 submitBtn.onclick = function (event) {
  alert("preventDefault!");
  var event = event || window.event;
  event.preventDefault(); // 兼容标准浏览器
  window.event.returnValue = false; // 兼容IE6~8
 };
</script>