Jquery 實現表單提交按鈕變灰，防止多次點擊提交重復數據

    表單提交時候我們應該控制提交按鈕，不能點擊多次進行數據的重復提交。要不然就會有冗余的重復的數據在系統中，造成系統出現數據垃圾。jQuery很簡單的就可以實現對表單提交按鈕控制，下面就是相關的例子和代碼。

<form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm">
    姓名:<input name = "name" type="text" />
             <button type="button" id="submit">提交申請</button>
</form>
<script>
$("#submit").click(function(){

    $(this).attr("disabled","true"); //設置變灰按鈕
    $("#messageForm").submit();//提交表單
    setTimeout("$('#submit').removeAttr('disabled')",3000); //設置三秒后提交按鈕 顯示

})
</scritp></span>

</span>

<form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm">
	姓名:<input name = "name" type="text" />
             <button type="button" id="submit">提交申請</button>
</form>
<script>
$("#submit").click(function(){
    $(this).attr("disabled","true"); //設置變灰按鈕

    $("#messageForm").submit();//提交表單

    setTimeout("$('#submit').removeAttr('disabled')",3000); //設置三秒后提交按鈕 顯示

     

})

</scritp></span>
</span>

附：其他的實現方法，也使用了js

  第一種：

<form name=fm method="POST" action="/">
<p>按鈕變灰</p>
    name: <input type="text" name="name"/>
     <input type="button" value="提交" onclick="javascript:{this.disabled=true;document.fm.submit();}">

</form>

<form name=fm method="POST" action="/">
<p>按鈕變灰</p>
    name: <input type="text" name="name"/>
     <input type="button" value="提交" onclick="javascript:{this.disabled=true;document.fm.submit();}">
</form>

 第二種：

<form name=fm method="POST" action="/" >
  <input type="submit" name="Submit" value="提交" id="submitId" onclick="submit();">
</form>
<script language="javascript">
 function submit()
 {
 var submitId=document.getElementById('submitId');
 submitId.disabled=true;
 document.fm.submit();
 setTimeout("submitId.disabled=false;",3000); //代碼核心在這里，3秒還原按鈕代碼
}
</script>

<form name=fm method="POST" action="/" >
  <input type="submit" name="Submit" value="提交" id="submitId" onclick="submit();">
</form>
<script language="javascript">
 function submit()
 {
 var submitId=document.getElementById('submitId');
 submitId.disabled=true;
 document.fm.submit();
 setTimeout("submitId.disabled=false;",3000); //代碼核心在這里，3秒還原按鈕代碼
}
</script> 

前后代碼進行控制，后台代碼也要進行控制，這樣子就可以確保萬無一失了！

后台代碼控制表單提交有一個好的辦法就是使用session， 具體可以參考下面這篇博文：

JavaWeb學習總結(十三)——使用Session防止表單重復提交

http://www.cnblogs.com/xdp-gacl/p/3859416.html

其實后台控制表單重復提交的原理：

（1）在表單提交頁面生成一個唯一的token；token可以保存在session中。（若使用了緩存，也可以保存在緩存中）

（2）提交的時候驗證，后台首先驗證token，驗證通過，才可以進行提交操作；

（3）當表單數據提交成功（保存到數據庫-持久化），然后刪除session（緩存）中對應的token。

 

在頁面中添加Token防止越權訪問-也可做表單重復提交，使用的原理也是Token!

http://blog.csdn.net/chinawszjr/article/details/51096095