how to prevent double click event on submit button

Question

I have a submit button in my page. Sometimes when I double click it double submits obviously, and the problem is that I'm saving the information in the database so I'll have duplicate information there, and I don't want that. I tried some jquery code like below but it didn't work for me.

Here my button tag is:

<input type="submit" id="btnSubmit" class="btn btn-large btn-success"    style="padding-right:40px; padding-left:40px; text-align:center;">
   

Jquery:

   $(document).ready(function()
   {
     $('#btnSubmit').dblclick(function()
     {
        $(this).attr('disabled',true);
        return false;
     });
    });  

How to proceed further?Preventdefault is not working

$(document).ready(function () {
    alert("inside click");
    $("#btnSubmit").on('dblclick', function (event) {  

       event.preventDefault();

 });
});

Answer 1

just put this method in your forms then it will handle double click or more clicks in once. once request send it will not allow to send again and again request.

 <script type="text/javascript">
            $(document).ready(function(){
                 $("form").submit(function() {
                        $(this).submit(function() {
                            return false;
                        });
                        return true;
                    }); 
            }); 
            </script>

Answer 2

Use setTimeout for a more user friendly way

$(document).ready(function () {
     $("#btnSubmit").on('click', function (event) {  
           event.preventDefault();
           var el = $(this);
           el.prop('disabled', true);
           setTimeout(function(){el.prop('disabled', false); }, 3000);
     });
});