Отключение кнопки отправки при нажатии на нее предотвратит отправку формы в 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);