Самый простой способ отключить кнопку при отправке формы?

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

Вот моя форма

<form method="POST">
    <input type="text" name="q"/>
    <button class="once-only">Send</button>
</form>

Вот моя первая попытка отключить двойную передачу:

$(document).ready(function(){
    $(".once-only").click(function(){
        this.disabled = true;
        return true;
    });
});

Этот подход предлагается здесь: Отключить кнопку после публикации, используя JS/Jquery. Этот пост предполагает, что отправляющий элемент должен быть вводом, а не кнопкой, но тестирование обоих не имеет значения. Вы можете попробовать это самостоятельно, используя эту скрипку: http://jsfiddle.net/uT3hP/

Как видите, это отключает кнопку, но также предотвращает отправку формы. В случаях, когда подающий элемент является кнопкой и элементом ввода.

Вопрос 1: почему этот обработчик кликов останавливает отправку формы?

Обыскав еще немного, я нахожу это решение (почему я не публикую форму, когда я отключаю кнопку отправки, чтобы предотвратить двойной щелчок?)

if($.data(this, 'clicked')){
    return false;
} else{
    $.data(this, 'clicked', true);
    return true;
}

Вы можете играть с этим, используя эту скрипку: http://jsfiddle.net/uT3hP/1/

Это работает, но...

Вопрос 2: это лучшее, что мы можем сделать?

Я думал, что это будет элементарная вещь. Подход 1 не работает, подход 2 работает, но мне это не нравится, и я чувствую, что должен быть более простой способ.

Ответы

Ответ 1

Вы можете использовать jQuery submit(). В этом случае он должен выглядеть примерно так:

$('form').submit(function(){
    $(this).children('input[type=submit]').prop('disabled', true);
});

Вот рабочий jsFiddle (сделанный Майком) - http://jsfiddle.net/gKFLG/1/.

Если ваша кнопка отправки не является прямым дочерним элементом элемента формы, вам необходимо заменить children на find. Кроме того, ваша кнопка отправки также может быть элементом button вместо элемента input. Например. Это так, если вы используете горизонтальные формы Bootstrap. Ниже приведена другая версия фрагмента:

$('form').submit(function(){
    $(this).find('button[type=submit]').prop('disabled', true);
});

Демо jsFiddle - http://jsfiddle.net/devillers/fr7gmbcy/

Ответ 2

Простое и эффективное решение

<form ... onsubmit="myButton.disabled = true; return true;">
    ...
    <input type="submit" name="myButton" value="Submit">
</form>

Источник: здесь

Ответ 3

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

    $('form').submit(function () {
        var button = $('#button');
        var oldValue = button.value;
        var isDisabled = true;

        button.attr('disabled', isDisabled);

        setTimeout(function () {
            button.value = oldValue;
            button.attr('disabled', !isDisabled);
        }, 3000)
    });

Ответ 4

Вы можете попробовать использовать следующий код:

$(document).ready(function(){
   $(".once-only").click(function(){
      this.submit();
      this.disabled = true;
      return true;
   });
});

Ответ 5

Это должно помочь:

<form class="form-once-only" method="POST">
    <input type="text" name="q"/>
    <button type="submit" class="once-only">Send</button>
</form>

JavaScript:

$(document).ready(function(){
    $("form.form-once-only").submit(function () {
        $(this).find(':button').prop('disabled', true);
    });
}

Ответ 6

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

$("input[type='submit']").click(function() {
    $(this).addClass('disabled');
});