Отключение кнопки отправки при нажатии на нее предотвратит отправку формы в Google Chrome

Я добавил следующий вид script в мой макет, внутри моего asp.net mvc: -

$(document).ready(function () {
    $('.btn.btn-primary').click(function () {
        $(this).prop("disabled", true);
        if (!$('form').valid()) {
            $(this).prop("disabled", false);
            return false;
        }
    });
    $('form').change(function () {
        $('.btn.btn-primary').prop("disabled", false);
    });

Цель моего script - отключить кнопки отправки и снова включить их, если модель недействительна или пользователь изменил значение формы. Вышеупомянутый script будет хорошо работать в IE и Firefox, но в Chrome я не могу отправить форму, так как когда пользователь нажимает кнопку отправки, кнопка будет отключена, но форма не будет отправлена. Любая идея, как я могу решить эту проблему в Chrome?

Ответ 1

Вместо этого отключите кнопку в событии нажатия кнопки - отключите его в событии отправки формы (вы также можете проверить форму для достоверности).

Таким образом, он будет работать повсеместно во всех браузерах.

<form action="http://www.microsoft.com">
  <input class="btn-primary" type="submit" value="submit"/>
</form>


$('form').submit(function() {
  $('input.btn-primary').prop("disabled", "disabled");
})

Ответ 2

У меня просто была такая же проблема, что Google Chrome не пропускал мое событие отправки, когда кнопка была отключена через jQuery.

Фоновая информация: у меня есть форма с кнопкой, которая должна быть отключена всякий раз, когда вы нажимаете. Таким образом, код отправки PHP не вызывается несколько раз. Этот submit работает на Drupal Backend, в моем случае как пользовательский submit_hook. Но наверняка работаю в любой другой CMS. Но это не проблема. Реальная проблема заключается в том, что код Javascript отключает кнопку, и Google Chrome считает, что кнопка полностью мертва, а не просто отключена. Таким образом, он больше не запускает код.

Но эта проблема довольно легко исправить.

Итак, этот код работает над Firefox/ IE:

(function($) {
Drupal.behaviors.somebehaviour = {
    attach: function(context, settings) {
        $('#edit-submit').click(function (e) {
            $('#edit-submit').val('Is saved...');
            $('#edit-submit').prop('disabled', 'disabled');
        });
    }
};
})(jQuery);

и включив его в Chrome, вам нужно добавить строку:

$(this).parents('form').submit();

поэтому для этого примера это, наконец, будет:

(function($) {
Drupal.behaviors.somebehaviour = {
    attach: function(context, settings) {
        $('#edit-submit').click(function (e) {
            $('#edit-submit').val('Is saved...');
            $('#edit-submit').prop('disabled', 'disabled');
            $(this).parents('form').submit();
        });
    }
};
})(jQuery);