Отключить кнопку отправки с плагином jQuery Form

Question

Привет. Я пытаюсь отключить кнопку отправки после нажатия на нее. Я также использую плагин jQuery Form, поэтому мой код выглядит так:

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

и моя функция disableButton:

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

Но теперь похоже, что вся моя форма отключена и ничего не отправлено на сервер! Так ли это работает? Если я отключу кнопку отправки в функции beforeSubmit (но форма уже отправлена), вся моя форма будет отключена? Как решить эту проблему?

Спасибо Dawid

Answer 1

Первая проблема заключается в том, что вы индексируете параметр jqForm, который возвращает элемент DOM для формы.У него нет функции children ().

jqForm - это объект jQuery, поэтому вы можете просто вызвать jqForm.children().Однако вместо этого я бы предложил вызвать jqForm.find(), так как дети ищут только непосредственных детей, а не всех детей.

Отключение полей при отправке является сложной задачей.Обычно я вместо этого прикрепляю обработчик событий «ничего не делать».

Примерно так:

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

Таким образом, пользователь может щелкнуть по нему, но ничего не произойдет:)

Answer 2

Вы говорите, что форма отправлена, но вы отключаете кнопку отправки в beforeSubmit.Как следует из названия beforeSubmit, оно срабатывает до того, как форма действительно отправлена.Без включенной кнопки отправки вы не можете отправить форму.

Подробнее об отключенных элементах формы здесь: http://www.w3.org/TR/html4/interact/forms.html#h-17.12.Короче говоря: «Отключенные элементы управления не могут быть успешными».

Answer 3

Ваши элементы формы включены? Чтобы убедиться в этом, попробуйте это:

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

Надеюсь, это поможет. Приветствия

Answer 4

Попробуйте это

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