Change button text but preserve default behavior

Question

I have some simple jQuery to change the text of a button once it's clicked

<button type="submit" id="zipUploadButton" class="btn btn-primary">Upload</button>

$uploadButton.click(function(){
  $(this).text('please wait').attr("disabled", "disabled");
});

The trouble is it seems doing this blocks default behavior (a form submission, which I still want to happen). Is there a way to make sure the default behavior is preserved or an alternate way to do what I'm trying above that would work?

Please share the whole script. What is $uploadButton, etc... — Oliboy50, Jul 05 '14 at 20:13
[Controls that are disabled cannot be successful.](http://www.w3.org/TR/html401/interact/forms.html#h-17.13.2) — r3mainer, Jul 05 '14 at 20:13

score 1 · Accepted Answer · answered Jul 05 '14 at 20:18

1

Disable the button in form submit event instead of the click event. The following code assume $form contains the parent form of $uploadButton.

$form.submit(function(){
    $uploadButton.attr('disabled', 'disabled');
});

answered Jul 05 '14 at 20:18

taggon

1,796
12
11

score 1 · Answer 2 · edited May 23 '17 at 12:11

1

You can use a timeout to remove the disabled attribute in order to submit:

For JQuery 1.6+:

$('#zipUploadButton').click(function(){
    var button = $(this);
    button.prop('disabled', true);
    setTimeout(function() {
         button.prop('disabled', false);
    },1000);
    $("#form1").submit();
});

Otherwise, as mentioned in the comments, a form cannot be submitted if the button is disabled: more info

For JQuery 1.5 and below:

To set the disabled attribute, you could use:

button.attr('disabled','disabled');

And to enable again, use .removeAttr()

button.removeAttr('disabled');

Credits

edited May 23 '17 at 12:11

Community

1
1

answered Jul 05 '14 at 20:18

imbondbaby

6,063
3
17
51

Should use `prop` to toggle `disabled` – tymeJV Jul 05 '14 at 20:19
1

You are right! Updated it... for JQuery 1.6+ you would want `prop` :). Thank you! – imbondbaby Jul 05 '14 at 20:21

score 0 · Answer 3 · answered Jul 05 '14 at 20:16

You have to delay disabling the button until after the event has completed. Something like this should help you.

$uploadButton.click(function(){
    var $this = $(this);
    $this.text('please wait');
    setTimeout(function(){
        $this.attr("disabled", "disabled");
    }, 10);
});

Change button text but preserve default behavior

3 Answers3