Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • Disable Button and Submit button after one click using JavaScript and jQuery

    @sudhanshu.tripathi
    Recommendations Offline Message

    • 0
    • 1
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 2.39k
    Comment on it

    Hello Everyone!!

    As we know that when we are clicking the submit button then it send the data to the server, but what happen if we are not disabling the submit button after the one click then here is the some problem :- 

    •  If the user double click on the submit button then the data will send twice to the server. 
    • If there is no message  to show that the  data is successfully send to the server then the user will click more times to the submit button. 

    To solve the above problem we can disable the submit button after the one click event by using javaScript and jQuery.  

    It is done by using the javaScript :-

    • onbeforeunload event handler:-  The javascript onbeforeunload event handler is executed before the page load. That means when the page is submitted the data to the server.

    In this example we have a submit button and a HTML button. when the submit button is clicked, with the help of onbeforeunload event handler we can disable the submit button with the help of the java script code.

    Code:-

    1.  <body>
    2.     <form action="#">
    3.     <input type="button" id="btn" value="Button" />
    4.     <input type="submit" id="btnSubmit" value="Submit" />
    5.     <script type="text/javascript">
    6.         window.onbeforeunload = function () {
    7.             var inputs = document.getElementsByTagName("INPUT");
    8.             for (var i = 0; i < inputs.length; i++) {
    9.                 if (inputs[i].type == "button" || inputs[i].type == "submit") {
    10.                     inputs[i].disabled = true;
    11.                 }
    12.             }
    13.         };
    14.     </script>
    15.     </form>
    16. </body>

    When the submit button is clicked, the loop will execute and disable the submit button.

    Using jQuery:-

    1.  <body>
    2.     <form action="#">
    3.     <input type="button" id="btn" value="Button" />
    4.     <input type="submit" id="btnSubmit" value="Submit" />
    5.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    6.     <script type="text/javascript">
    7.         $(window).on('beforeunload', function () {
    8.             $("input[type=submit], input[type=button]").prop("disabled", "disabled");
    9.         });
    10.     </script>
    11.     </form>
    12. </body>

     

    HTML tags
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: