Disabling submit button halts request in chrome/IE8

Question

I have a simple form with three-four input fields and a submit button.

Functionality to be implemented: On clicking submit button, submit button should get disabled so that no other click on button can be done. I can't hide the button.

Now as I am disabling submit button using jquery/javascript, request also gets disabled & form didn't post in CHROME/IE8.

Any solutions???

Edited:

Code:

$('#submit').attr('disabled', true); OR $('#submit').prop('disabled', true);// for IE

i even tried $('#submit').attr('disabled', 'disabled'); but same result.

Answer 1

You say you can't hide the button, but that is the answer you need.

When I had this problem, I hid the button and replaced it with a small "loading" spinner graphic of the same size.

This deals with the problem of giving the user sensible feedback of what's happened, as well as solving the disabled button problem.

If you really need the button to remain in place but disabled, then you could use the same technique to hide the real button and display an alternative button in its place that looks the same but is disabled.

By the way, when I had this problem, it wasn't that the form failed to post at all; it's just that the browser didn't include the disabled button in the fields it posted. This is obviously a problem if your back-end script relies on the button being one of the posted values. If this is the way it's happening for you, then the other solution would be to have a hidden field, and copy the button value into it when you disable the button. This would then still submit the form without the disabled button being posted, but the value you need would be there in the hidden field instead.

Hope that helps.

Answer 2

on the click event - submit the form.

$(document).ready(function(){
    $('#submit-button-id').click(function(e) {
        //stop normal submit
        e.preventDefault();

        //disable button
        $(this).attr('disabled','disabled');

        //submit form
        $('#form-id').submit();
    });
});

This works as well.

$(document).ready(function(){
    $('#form-id').submit(function(e) {
        e.preventDefault();
        somefunction();
    });
});

function somefunction() {
    $('#form-id').unbind('submit');
    $('#submit-button-id').attr('disabled','disabled');
    $('#form-id').submit();
}