JavaScript Two Ways to Prevent Multiple Submissions from User

  • 2021-07-04 18:17:24
  • OfStack

"When the server is overloaded, there will be a phenomenon of submission jamming, but when the user is operating, he will repeatedly click Submit, which will cause greater pressure on the server. So we need to limit it."

[1] Disable Submit Button


<html>
    <head>
          <script>
                // Disable default behavior    Because this is to simulate the server overload, it needs to be prohibited first submit Button automatic submission function 
          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];                // Get to form Element 
          var txt=form.elements['txt'];                                                          // Get to name Property is txt Form elements of 
          var sub=form.elements['sub'];                                                          // Get to name Property is sub Form elements of 
          form.onsubmit=function(event){                                                    // Create 1 Commit events because submit Yes form To submit the event, so we need to pass the form To ban 
                event=event || window.event;                                                    
                preventDef(event);                                                                // Disable default commit behavior 
                sub.disabled=true          // No. 1 1 One is to disable the button after the user submits, and then release the button after waiting for the user to submit 
                
                setTimeout(function(){                                                          // Simulation 5 Submit in seconds 
                form.submit()},5000);
          }
 
}
          </script>
    </head>
    <body>
          <form id="form">
                <input type="text" id="txt" name="txt">
                <input type="submit" id="sub">
          </form>
    </body>
</html>

[Type 2 Creates 1 Variable for Judgment]

[1] Disable Submit Button


<html>
    <head>
          <script>
                // Disable default behavior    Because this is to simulate the server overload, it needs to be prohibited first submit Button automatic submission function 
          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];                // Get to form Element 
          var txt=form.elements['txt'];                                                          // Get to name Property is txt Form elements of 
          var sub=form.elements['sub'];                                                          // Get to name Property is sub Form elements of 
          var flag=true;                                                                                  // Create first 1 Variable, indicating that the user has not clicked Submit by default 
          form.onsubmit=function(event){                                                    // Create 1 Commit events because submit Yes form To submit the event, so we need to pass the form To ban 
                event=event || window.event;                                                    
                preventDef(event);                                                                // Disable default commit behavior 
                 if(flag==true){
                            flag=false;                                                          // Indicates that the user has clicked the Submit button 
                }else{
                      alert(' Submission in progress, please do not repeat submission ') ;                              
                }
                
                setTimeout(function(){                                                          // Simulation 5 Submit in seconds 
                form.submit()},5000);
          }
}
          </script>
    </head>
    <body>
          <form id="form">
                <input type="text" id="txt" name="txt">
                <input type="submit" id="sub">
          </form>
    </body>
</html>

Two Ways to Prevent Multiple Submissions in JavaScript

"When the server is overloaded, there will be a phenomenon of submission jamming, but when the user is operating, he will repeatedly click Submit, which will cause greater pressure on the server. So we need to limit it."

[1] Disable Submit Button


<html>
    <head>
          <script>
                // Disable default behavior    Because this is to simulate the server overload, it needs to be prohibited first submit Button automatic submission function 
          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];                // Get to form Element 
          var txt=form.elements['txt'];                                                          // Get to name Property is txt Form elements of 
          var sub=form.elements['sub'];                                                          // Get to name Property is sub Form elements of 
          form.onsubmit=function(event){                                                    // Create 1 Commit events because submit Yes form To submit the event, so we need to pass the form To ban 
                event=event || window.event;                                                    
                preventDef(event);                                                                // Disable default commit behavior 
                sub.disabled=true          // No. 1 1 One is to disable the button after the user submits, and then release the button after waiting for the user to submit 
                
                setTimeout(function(){                                                          // Simulation 5 Submit in seconds 
                form.submit()},5000);
          }
 
}
          </script>
    </head>
    <body>
          <form id="form">
                <input type="text" id="txt" name="txt">
                <input type="submit" id="sub">
          </form>
    </body>
</html>

[Type 2 Creates 1 Variable for Judgment]

[1] Disable Submit Button


<html>
    <head>
          <script>
                // Disable default behavior    Because this is to simulate the server overload, it needs to be prohibited first submit Button automatic submission function 
          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];                // Get to form Element 
          var txt=form.elements['txt'];                                                          // Get to name Property is txt Form elements of 
          var sub=form.elements['sub'];                                                          // Get to name Property is sub Form elements of 
          var flag=true;                                                                                  // Create first 1 Variable, indicating that the user has not clicked Submit by default 
          form.onsubmit=function(event){                                                    // Create 1 Commit events because submit Yes form To submit the event, so we need to pass the form To ban 
                event=event || window.event;                                                    
                preventDef(event);                                                                // Disable default commit behavior 
                 if(flag==true){
                            flag=false;                                                          // Indicates that the user has clicked the Submit button 
                }else{
                      alert(' Submission in progress, please do not repeat submission ') ;                              
                }
                
                setTimeout(function(){                                                          // Simulation 5 Submit in seconds 
                form.submit()},5000);
          }
}
          </script>
    </head>
    <body>
          <form id="form">
                <input type="text" id="txt" name="txt">
                <input type="submit" id="sub">
          </form>
    </body>
</html>

Above is the site to introduce JavaScript users to prohibit multiple submission of the two methods of related information, I hope to help you!


Related articles: