jQuery '.click(callback)' prevents the default event

Question

I'm trying to prevent the double-clicking of a form button , disabling the element for some seconds.

<form action="#" method="POST">
    <input type="text" />
    <input type="password" />
    <button class="myButton" type="submit">Send</button>
</form>


var that = this;
this.element = $(".myButton");
this.element.click(function(e) {
    this.element.prop("disabled", true);
    window.setTimeout(function() {
        that.element.prop("disabled", false);
    }, 2000);
});

It succeeds in enabling/disabling, but the use of .click() function prevents (automatically? O_o) the propagation of the event, and the page doesn't follow the link in the form action attribute.

Note I'm trying to add the behaviour to a form button that was previously working perfectly (POSTing to the aciton link). Also the enabling/disabling works perfectly (regardless eventual errors that I could have made in the adaption of the code above).

PS - Any solution must be cross-browser and compatible with IE8.

Answer 1

By disabling the button, you are preventing the post action from taking place. So what you would want to do is disable the form and then use javascript call to actually submit the form. That could look like this:

$('.myButton').click(function() {
    $button = $(this);
    $button.attr('disabled', true);
    $button.closest('form').submit();
    setTimeout(function() {
        $button.attr('disabled', false);
    }, 2000);
});