Question

I have a submit button and the following code that does something once its clicked:

<input name="Update" class="LongSubmit" id="Update" type="submit" WaitingValue="Updating..." value="Update"/>

        $('.LongSubmit').click(function() {
            $(this).attr('disabled', 'disabled');
            $(this).addClass('AjaxInProgress');
            $(this).val($('.LongSubmit').attr('WaitingValue'));
            $(this).closest('form').submit(); // Added so it submits the form
        })

I found that when I added this handler without the commented line the form didn’t get submitted, so I added it in and now the form does get submitted.

However, if I click a submit button to click a form normally in the post there is the key Update, however when I do it programmatically within the click handler that key isn’t there.

How do I handle a submit button’s click event without effecting the form’s POST at all (i.e. having the update key there)?
(Or how can i emulate it exactly as if the handler wasn’t there?)

---

As Zefiryn has pointed out, it’s because of disable the button, however I do want to do this to prevent multiple clicks.

Answer 1

I’ve managed to solve this with Zefiryn’s help, by disabling the button only after the form has been submitted:

    $(function() {

        $('.LongSubmit').click(function() {
            $(this).closest('form').submit();
            $(this).addClass('AjaxInProgress');
        })

        function DisableAjaxButtons() {
            $('.AjaxInProgress').val($('.AjaxInProgress').attr('WaitingValue'));
            $('.AjaxInProgress').attr('disabled', 'disabled');
        }

        $('form').submit(function() {
            setTimeout(DisableAjaxButtons, 1);
        })
    });

I’d still like to see if anyone has any ideas beyond this (IMO) some what hacky solution of creating a timer just so it happens after submission of the form.