Question

I am trying to disable the submit button of a form after it is submitted to prevent double posting. While I can disable the button, I can’t get the form to actually submit as well.

Here’s the jQuery:

// Disable submit button after click to prevent double posting
$(document).ready(function () {
    $('#add_pin :submit').on('click', function (e) {

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

    });
});

This will successfully disable the button, but that’s it.

I’ve tried adding $(this).submit() after the .prop() but it still doesn’t do anything.

The HTML is just:

<form action="http://example.com/add" method="post" accept-charset="utf-8" id="add_pin" enctype="multipart/form-data">
// input fields
<input type="submit" name="submit" value="Add Pin" class="radius button">
</form>

What am I doing wrong?

Answer 1

It would be better to use the form’s onsubmit event instead of the submit button’s click event because onsubmit will handle submissions from the enter key as well as the submit button being clicked.

$(document).ready(function () {

    $('#add_pin').submit(function(){
        $(this).find('input[type=submit]').prop('disabled', true);
    });

});