How to disable submit button after click?

Question

I am trying to disable button after click by using following code but it is not working.

View

<button class="button button-text-only" onclick=" $('#MyForm').submit() ">Create </button>

js

//inside document.ready
$('#MyForm').submit(function(){
    $('input[type=submit]', this).attr('disabled', 'disabled');
});

TIA

I see a button not an input submit. You may want to change that. — Spokey
– Spokey, Commented May 22, 2014 at 14:09
If on submit reloads the page then is logical to loose attr disabled.. — Alex Char
– Alex Char, Commented May 22, 2014 at 14:10
@Spokey is correct. And also I think that your button is not inside the form because of your javascript code. So, the second argument of the selector may be wrong. — gustavodidomenico
– gustavodidomenico, Commented May 22, 2014 at 14:11

Arko Elsenaar · Accepted Answer · 2014-05-22 14:23:11Z

6

FIDDLE DEMO

$('button').click(function() {
    $(this).prop('disabled', true);
});

edited May 22, 2014 at 14:23

answered May 22, 2014 at 14:11

Arko Elsenaar

1,7394 gold badges18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Runcorn Over a year ago

you better use prop("disabled",true)

Lakhae Over a year ago

Thank you all for help. @Arko Elsenaar I tried your code but it is not working.

Arko Elsenaar Over a year ago

Pawal, you are right. I have modified my answer and set up a really simple demo so you can see it in action. You can use this in your code.

Pete · Accepted Answer · 2014-05-22 14:31:51Z

2

I would change your button to the following code

<button id="button-id" class="button button-text-only">Create </button>

then bind the click event this way instead:

$('#button-id').on('click', function(e) {
    e.preventDefault(); //prevent the form from being submitted

    $(this).prop('disabled', true);

    //process form with ajax otherwise your page is just going to reload and the button won't be disabled anymore
    var form = $('#MyForm');
    $.ajax({
        url: form.get(0).action,
        type: form.get(0).method,
        data: form.serialize(),
        success: function (result) {
           //do finished stuff here
           alert('done');
        }
    });
});

edited May 22, 2014 at 14:31

answered May 22, 2014 at 14:25

Pete

58.8k31 gold badges132 silver badges188 bronze badges

1 Comment

BlackSD Over a year ago

This is the best solution also we can add some AJAX properties, nice!

Sebastien C. · Accepted Answer · 2014-05-22 14:45:02Z

1

Use the following to disable the button ...

$('#MyForm').on('click', function () {
    $("#myButton").attr('disabled', 'disabled');
});

Then if you need to enable you can remove disabled as below...

$("#myButton").removeAttr('disabled');

edited May 22, 2014 at 14:45

Sebastien C.

4,8602 gold badges24 silver badges33 bronze badges

answered May 22, 2014 at 14:21

Gary

617 bronze badges

1 Comment

War10ck Over a year ago

You should use .prop() instead of .attr() here. Try .prop('disabled', true) and .prop('disabled', false) instead...

Collectives™ on Stack Overflow

How to disable submit button after click?

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related