submit() event not firing on form

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?

Does `$('#add_pin :submit')` select a `form`? If not, try `$('#add_pin :submit')[0].form.submit()` — marekful, Feb 05 '13 at 16:41
I don't believe you would be able to call `submit()` if you're disabling it first. You could try to call `submit()` before you set it to disabled. Or you could perhaps try the `one()` method defined here: http://api.jquery.com/one/. — Chase, Feb 05 '13 at 16:42
I don't see a problem here, actually: `submit` event IS fired when you write the code like that. [Proof](http://jsfiddle.net/vEvzp/). But it's better to use `submit` handler indeed. — raina77ow, Feb 05 '13 at 16:49
I wonder though, aren't you trying to submit the files here? If so, can't you show the full code - or at least the 'files-related' part? — raina77ow, Feb 05 '13 at 16:53
@raina77ow Not sure I'm following you. What full code are you talking about? The full HTML form with all the inputs or the PHP that handles the file uploading? — Motive, Feb 05 '13 at 17:06

score 3 · Accepted Answer · answered Feb 05 '13 at 16:46

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);
    });

});

submit() event not firing on form

1 Answers1