關於表單自動提交的問題及解決方式

在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>