Question

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

Answer 1

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 🙂