js表單提交後提交按鈕不可點選程式碼例項

admin發表於2017-04-06
JS

本章節分享一段程式碼例項，它實現了點選提交按鈕之後，按鈕就處於不可用的狀態。

這可以有效的放置表單重複提交現象，程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script type="text/javascript">
function sub() {
  document.forms[0].elements[0].disabled = true;
  document.forms[0].submit();
}
window.onload=function(){
  var obt=document.getElementById("bt");
  obt.onclick=function(){
    sub();
  }
}
</script>
</head>
<body>
<form action="login.action" target="_blank" method="post">
  <input type="button" name="btn" id="bt" value="提交表單" />
</form>
</body>
</html>

程式碼非常的簡單，下面介紹一下它的實現過程。

程式碼註釋:

（1）.function sub(){},此函式是實現的核心。

（2）.document.forms[0].elements[0].disabled = true，將form表單下面的表單元素集合的第一個元素設定為不可用，當然這裡就是button按鈕元素。

（3）.document.forms[0].submit()，document.forms獲取的是form元素集合，document.forms[0]就是第一個form元素。

（4）.window.onload=function(){}，當文件內容完全載入完畢再去執行函式中的程式碼。

（5）.var obt=document.getElementById("bt")，獲取表單按鈕物件。

（6）.obt.onclick=function(){

  sub();

}，註冊click事件處理函式。

相關文章