Disable the submit button after clicking and enable it back again after a few seconds

You can do what you wanted like this:

var fewSeconds = 5;
$('#btn').click(function(){
    // Ajax request
    var btn = $(this);
    btn.prop('disabled', true);
    setTimeout(function(){
        btn.prop('disabled', false);
    }, fewSeconds*1000);
});

or you can use jQuery's .complete() method which is being executed after the ajax receives a response:

$('#btn').click(function(){
    var btn = $(this);
    $.post(/*...*/).complete(function(){
        btn.prop('disabled', false);
    });
    btn.prop('disabled', true);

});

edit: this is an example with 3 seconds server-side response delay


Edit

Since even the answer is 8 years old, but still getting attention and jQuery is getting less popular I think it's worth adding example without jQuery

const fewSeconds = 3
 
document.querySelector('#btn').addEventListener('click', (e) => {
    e.target.disabled = true
  setTimeout(() => {
   e.target.disabled = false
  }, fewSeconds * 1000)
})
<input type='button' id="btn" value="click me" />


Just place this in your JS for the page the submit button is on

<script type="text/javascript">
  $(document).ready(function(){
    $("input[type='submit']").attr("disabled", false);
    $("form").submit(function(){
      $("input[type='submit']").attr("disabled", true).val("Please wait...");
      return true;
    })
  })
</script>

Code source

Tags:

Forms

Ajax

Jquery