DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> JavaScript禁止用戶多次提交的兩種方法
JavaScript禁止用戶多次提交的兩種方法
編輯:關於JavaScript     

【當服務器超載時,會出現提交卡頓的現象,但是用戶在操作時,會不停重復點擊提交,會造成服務器壓力更大。所以我們需要進行限制】

[1]將提交按鈕禁止

<html>
  <head>
    <script>
      //禁止默認行為  因為這裡要模擬服務器超載的時候,所以需要先禁止掉submit按鈕自動提交的功能
    function preventDef(event){
      event=event||window.event;
      if(event.preventDefault){
        return event.preventDefault;
        }else{
         return event.returnValue=false;
        }
      }
    window.onload=function(){
    var form=document.getElementsByTagName('form')[0];      //獲取到form元素
    var txt=form.elements['txt'];                    //獲取到name屬性為txt的表單元素
    var sub=form.elements['sub'];                    //獲取到name屬性為sub的表單元素
    form.onsubmit=function(event){                  //創建一個提交事件,因為submit是form來提交事件的,所以我們要禁止也需要通過form來禁止
      event=event || window.event;                  
      preventDef(event);                      //禁止掉默認提交行為
      sub.disabled=true    //第一種就是在用戶提交完之後,將按鈕禁用不再讓用戶提交,等待提交完畢之後再釋放按鈕
      
      setTimeout(function(){                    //模擬5秒鐘後再提交
      form.submit()},5000);
    }
 
}
    </script>
  </head>
  <body>
    <form id="form">
      <input type="text" id="txt" name="txt">
      <input type="submit" id="sub">
    </form>
  </body>
</html>

[第二種 創建一個變量進行判斷]

[1]將提交按鈕禁止

<html>
  <head>
    <script>
      //禁止默認行為  因為這裡要模擬服務器超載的時候,所以需要先禁止掉submit按鈕自動提交的功能
    function preventDef(event){
      event=event||window.event;
      if(event.preventDefault){
        return event.preventDefault;
        }else{
         return event.returnValue=false;
        }
      }
    window.onload=function(){
    var form=document.getElementsByTagName('form')[0];      //獲取到form元素
    var txt=form.elements['txt'];                    //獲取到name屬性為txt的表單元素
    var sub=form.elements['sub'];                    //獲取到name屬性為sub的表單元素
    var flag=true;                            //先創建一個變量,表示默認的時候用戶還沒點擊提交
    form.onsubmit=function(event){                  //創建一個提交事件,因為submit是form來提交事件的,所以我們要禁止也需要通過form來禁止
      event=event || window.event;                  
      preventDef(event);                      //禁止掉默認提交行為
       if(flag==true){
          flag=false;                    //表示用戶已經點擊過提交按鈕
      }else{
        alert('正在提交,請勿重復提交');          
      }
      
      setTimeout(function(){                    //模擬5秒鐘後再提交
      form.submit()},5000);
    }
}
    </script>
  </head>
  <body>
    <form id="form">
      <input type="text" id="txt" name="txt">
      <input type="submit" id="sub">
    </form>
  </body>
</html>

JavaScript禁止用戶多次提交的兩種方法

【當服務器超載時,會出現提交卡頓的現象,但是用戶在操作時,會不停重復點擊提交,會造成服務器壓力更大。所以我們需要進行限制】

[1]將提交按鈕禁止

<html>
  <head>
    <script>
      //禁止默認行為  因為這裡要模擬服務器超載的時候,所以需要先禁止掉submit按鈕自動提交的功能
    function preventDef(event){
      event=event||window.event;
      if(event.preventDefault){
        return event.preventDefault;
        }else{
         return event.returnValue=false;
        }
      }
    window.onload=function(){
    var form=document.getElementsByTagName('form')[0];      //獲取到form元素
    var txt=form.elements['txt'];                    //獲取到name屬性為txt的表單元素
    var sub=form.elements['sub'];                    //獲取到name屬性為sub的表單元素
    form.onsubmit=function(event){                  //創建一個提交事件,因為submit是form來提交事件的,所以我們要禁止也需要通過form來禁止
      event=event || window.event;                  
      preventDef(event);                      //禁止掉默認提交行為
      sub.disabled=true    //第一種就是在用戶提交完之後,將按鈕禁用不再讓用戶提交,等待提交完畢之後再釋放按鈕
      
      setTimeout(function(){                    //模擬5秒鐘後再提交
      form.submit()},5000);
    }
 
}
    </script>
  </head>
  <body>
    <form id="form">
      <input type="text" id="txt" name="txt">
      <input type="submit" id="sub">
    </form>
  </body>
</html>

[第二種 創建一個變量進行判斷]

[1]將提交按鈕禁止

<html>
  <head>
    <script>
      //禁止默認行為  因為這裡要模擬服務器超載的時候,所以需要先禁止掉submit按鈕自動提交的功能
    function preventDef(event){
      event=event||window.event;
      if(event.preventDefault){
        return event.preventDefault;
        }else{
         return event.returnValue=false;
        }
      }
    window.onload=function(){
    var form=document.getElementsByTagName('form')[0];      //獲取到form元素
    var txt=form.elements['txt'];                    //獲取到name屬性為txt的表單元素
    var sub=form.elements['sub'];                    //獲取到name屬性為sub的表單元素
    var flag=true;                            //先創建一個變量,表示默認的時候用戶還沒點擊提交
    form.onsubmit=function(event){                  //創建一個提交事件,因為submit是form來提交事件的,所以我們要禁止也需要通過form來禁止
      event=event || window.event;                  
      preventDef(event);                      //禁止掉默認提交行為
       if(flag==true){
          flag=false;                    //表示用戶已經點擊過提交按鈕
      }else{
        alert('正在提交,請勿重復提交');          
      }
      
      setTimeout(function(){                    //模擬5秒鐘後再提交
      form.submit()},5000);
    }
}
    </script>
  </head>
  <body>
    <form id="form">
      <input type="text" id="txt" name="txt">
      <input type="submit" id="sub">
    </form>
  </body>
</html>

以上所述是小編給大家介紹的JavaScript禁止用戶多次提交的兩種方法的相關資料,希望對大家有所幫助!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved