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

开发者_如何学JAVA

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