отключить кнопку формы после нажатия

Question

Я хочу отключить кнопку отправки формы после ее нажатия, чтобы предотвратить отправку формы несколько раз. Я использую следующий код, чтобы отключить кнопку и добавить класс, который делает ее отключенной:

$("form button.primaryAction").click(function() {
    $(this).prop("disabled", true).addClass('disabledBtn');
    return true;
});

Он отлично работает в IE и Firefox, но в Chrome 17 форма не отправляется. Я думаю, я мог бы заменить код выше на:

$("form button.primaryAction").click(function() {
    $(this).prop("disabled", true).addClass('disabledBtn');

    var form = // how can I get a reference to the form from the button 'this' ?
    form.submit();
    return false;
});

Но, как вы можете видеть, я не уверен, как получить ссылку на форму из обработчика кликов.

Answer 1

this.form даст вам ссылку.

Все элементы формы (кнопки, входы, элементы выбора и т. Д.) Имеют свойство form , которое указывает на элемент формы, к которому они принадлежат.

Answer 2

Вы можете обойти эту проблему, используя функцию submit () jquery, а не функцию click (). Содержащаяся функция будет запускать только после действия отправки.

Answer 3

Ваш код не имеет смысла!Сначала вы отключаете отправку по умолчанию, а затем отправляете вручную.

$("form button.primaryAction").click(function() {
    $(this).prop("disabled", true).addClass('disabledBtn');

    var form = this.form;
    form.submit(); // submits the form
    return false;  // disable the defualt submit.... ?!
});

Не отменяйте автоматическую отправку и все!

$("form button.primaryAction").click(function() {
    $(this).prop("disabled", true).addClass('disabledBtn');
});

Я бы написал так:

$("form").submit(function() {
    $('button.primaryAction').prop("disabled", true).addClass('disabledBtn');
});