Jquery disable button on click to prevent multiple form submission

In this quick post I’ll show you how to disable click event using jquery, as you have faced this issue while submitting your form data using ajax, User may click multiple times if you haven’t disable submit button. So here I’ll show you very quick method to fix this issue. It’ll also help you to prevent duplicate entry in database.
You can simply use jQuery off() method, jQuery off() method is used to remove event handler from the element attached with the on() method. Use off() method after click event is triggered to disable element for the future clicks.



In demo I am going to create two button Click Me and Disable Click, As whenever you click on Click me button it’ll return a popup alert message But if you click “Disable Click” button it’ll disable click event on “Click Me” button and popup alert will never display as soon as page will be refreshed.


<button id="clickMe">Click Me</button>
 <button id="disableClick">Disable Click</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
   $(document).ready(function(){
        $('#disableClick').on('click',function(){
            $('#clickMe').off('click');
            alert("Click Me Disabled");
        });
        $('#clickMe').on('click',function(){
            alert('Welcome to www.iamrohit.in');
        });
    });
    </script>

See Demo


One Reply to “Jquery disable button on click to prevent multiple form submission”

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.