I have this form with conditions that alert validation errors before posting data. the problem is if someone double clicks (by mistake perhaps), the form is submitted, then the form is cleared on the first click then the second click will alert 'form empty', which could be confusing as it all happens in a split second. so what I want is to temporarily disable the button when clicked for 3 seconds. but what I have now just times out the whole function for 3 seconds not just disabling the button. how should I be doing this? here is a simplified version of the form. Thanks

$('#send').click(function(){

   var self = $('#send');
       setTimeout(function() {
       self.disabled = false;
   if(!$('#text').val()){
      alert('field empty');
  }else{
        $('#message').html('done');
        $('#text').val('');
    }
  }, 3000);
});  

I have this form with conditions that alert validation errors before posting data. the problem is if someone double clicks (by mistake perhaps), the form is submitted, then the form is cleared on the first click then the second click will alert 'form empty', which could be confusing as it all happens in a split second. so what I want is to temporarily disable the button when clicked for 3 seconds. but what I have now just times out the whole function for 3 seconds not just disabling the button. how should I be doing this? here is a simplified version of the form. Thanks

$('#send').click(function(){

   var self = $('#send');
       setTimeout(function() {
       self.disabled = false;
   if(!$('#text').val()){
      alert('field empty');
  }else{
        $('#message').html('done');
        $('#text').val('');
    }
  }, 3000);
});  

• javascript
• jquery
• html

• Why not disable the button after the first click? – Diodeus - James MacFarlane Commented Mar 4, 2013 at 17:20
• that's what I'm trying, but maybe I am doing something wrong – user2014429 Commented Mar 4, 2013 at 17:23

3 Answers 3

I've written a small example for you, of disabling a button on click. The timeout will enable the button after 3000 miliseconds.

Working demo

html:

<input id="text">
<input id="send" type="button" value="send"/>
<div id="message"></div>

Javascript:

$('#send').click(function(){
    var button = $(this);
    button.attr('disabled', 'disabled');
    setTimeout(function() {
         button.removeAttr('disabled');
    },3000);
    if(!$('#text').val()){
       alert('field empty');
       button.removeAttr('disabled');
    }else{
        $('#message').html('done');
        $('#text').val('');
    }
});

You could use jQuery's one() instead of click(). Once the function is run it will be unbound.
If you want to re-enable it you could put the timeout to re-bind it at the end of the function.

Using your method, it looks like you're never actually disabling the button:

this.disabled = 'disabled';

You are not correctly disabling the button. You are setting the .disabled property on a jQuery object, not the wrapped DOM element.

Try:

self.prop('disabled', false);

Instead of:

self.disabled = false;

EDIT:

Actually the code above was attempting to re-ebable the button. There was no code to disable the button.

I also think you want to perform the validation right away. The call to setTimeout() should just be for re-enabling the button, like this:

$('#send').click(function() {
    var self = $(this);

    // Disable the button.
    self.prop('disabled', true);

    // Process click.
    if (!$('#text').val()) {
        alert('field empty');
    } else {
        $('#message').html('done');
        $('#text').val('');
    }

    // Cause the button to re-enable after 3 seconds.
    setTimeout(function() {
        self.prop('disabled', false);
    }, 3000);
});