Disable submit button with jQuery Form Plugin

Hi I'm trying to disable a submit button after clicking on it. I'm also using a jQuery Form plugin so my code looks like :

$('#passwordForm').ajaxForm({
            dataType:  'json',
            beforeSubmit:  disableButton,
            success:   processPassword
        });

and my disableButton function is :

function disableButton(formData, jqForm, options) {
    jqForm[0].children('input[type=submit]').attr('disabled', 'disabled');
}

But now it looks like my whole form is disabled and nothing is send to the server! Does it work that way? If I disable a submit button in beforeSubmit function ( but the form is already submitted) my whole form will be disabled? How to solve this problem?

Thanks Dawid

The first issue is that you're indexing the jqForm parameter, which returns the DOM element for the form. This doesn't have a children() function.

jqForm is a jQuery object, so you can just call jqForm.children(). However, I'd suggest calling jqForm.find() instead, since children only searches the immediate children, not all children.

Disabling fields on submit is a tricky issue. Usually what I'll do is attach a do-nothing event handler instead.

Something like this:

$('#passwordForm').ajaxForm({
    dataType:  'json',
    beforeSubmit:  disableButton,
    success:   processPassword
});

function disableButton(data, $form, opts) {
    $form.find('input:submit').val("Please wait...").click(function(e){
        e.preventDefault();
        return false;
    });
}

So the user can click on it, but nothing will happen :)

You say the form is submitted, but you disable the submit button in the beforeSubmit. As the name beforeSubmit suggests, this is triggered before the form is actually submitted. Without a enabled submit button, you cannot submit a form.

Read more about disabled form elements here: http://www.w3.org/TR/html4/interact/forms.html#h-17.12 . To make a long story short: "Disabled controls cannot be successful."

Are your form elements enabled? To ensure it, try this:

function disableButton(formData, jqForm, options) {
    jqForm[0].find(':input').attr('disabled', false);
    jqForm[0].find('input[type=submit]').attr('disabled', true);
}

Hope this helps. Cheers

Try this

function disableButton(formData, jqForm, options) {
    jqForm[0].children('input[type="submit"]').attr('disabled', 'disabled');
}