Пожалуйста, простите меня, если это основная вещь, потому что я новый ученик Javascript / jQuery. Я пытаюсь отключить кнопку отправки, чтобы отключить несколько отправлений. Здесь я столкнулся с несколькими решениями, но все они использовали конкретное имя формы. Но я хотел применить глобальное решение для всех форм на всех страницах, поэтому мне не нужно писать код на каждой странице, поэтому я помещаю это в нижний колонтитул, поэтому на всех страницах есть:
$('input:submit').click(function(){ $('input:submit').attr("disabled", true); }); Этот код работает на всех формах на всех страницах, как я хотел, но если HTML5 обязательные поля в форме и форме представлены без них, конечно, уведомления появляются, но кнопка по-прежнему отключается. Итак, я попытался с этим:
$('input:submit').click(function(){ if ($(this).valid()) { $('input:submit').attr("disabled", true); $('.button').hide(); }); });
Но это не работает. Пожалуйста, помогите мне, чтобы jQuery отключился только после проверки всех HTML5. благодаря
Попробуйте это и дайте мне знать:
$('input:submit').click(function(){ if ($(this).closest("form").checkValidity()) { $('input:submit').attr("disabled", true); $('.button').hide(); }); });
Попробуй это
`jQuery('input[type=submit]').click(function(){ return true;jQuery(this).prop('disabled','disabled');})`
запустите этот код при успешной проверке формы
Лучше присоединить обработчик к событию submit а не к событию click , потому что событие submit запускается только после успешной проверки. (Это избавляет вас от необходимости проверять правильность.)
Но обратите внимание, что если кнопка отправки отключена, любое значение, которое они могут удерживать, НЕ отправляется на сервер. Поэтому нам нужно отключить их после отправки формы.
Вопрос усугубляется новой form атрибута HTML5, которая позволяет связанным входам находиться где угодно на странице, если их атрибут формы соответствует идентификатору формы.
Это фрагмент JQuery, который я использую:
$(document).ready( function() { $("form").on("submit", function(event) { var $target = $(event.target); var formId = $target.attr("id"); // let the submit values get submitted before we disable them window.setTimeout(function() { // disable all submits inside the form $target.find("[type=submit]").prop("disabled", true); // disable all HTML5 submits outside the form $("[form=" + formId + "][type=submit]").prop("disabled", true); }, 2); // 2ms }); });
— [ПРЕДУПРЕЖДЕНИЕ] —
При отключении кнопок отправки запрещается несколько представлений форм, кнопки имеют неудачный побочный эффект оставления отключенным, если пользователь нажимает кнопку [Back] .
Подумайте об этом сценарии, пользователь редактирует текст, клики отправляет (и перенаправляется на другую страницу для просмотра изменений), щелкает назад, чтобы редактировать еще несколько, … и … они не могут повторно отправить!
Решение состоит в том, чтобы (повторно) включить кнопку отправки при загрузке страницы:
// re-enable the submit buttons should the user click back after a "Save & View" $(document).ready( function() { $("form").each(function() { var $target = $(this); var formId = $target.attr("id"); // enable all submits inside the form $target.find("[type=submit]").prop("disabled", false); // enable all HTML5 submits outside the form $("[form=" + formId + "][type=submit]").prop("disabled", false); }); });
Руприт , спасибо за подсказку. Ваш пример не работал для меня (в Firefox), но мне это очень помогло.
Вот мое рабочее решение:
$(document).on("click", ".disable-after-click", function() { var $this = $(this); if ($this.closest("form")[0].checkValidity()) { $this.attr("disabled", true); $this.text("Saving..."); } });
Поскольку checkValidity () не является функцией jQuery, а функцией JavaScript, вам нужно получить доступ к элементу JavaScript, а не к объекту jQuery. Вот почему должен стоять [0] за $ this.closest («форма») .
С помощью этого кода вам нужно только добавить класс = "отключить после нажатия" на кнопку, ввод, ссылку или все, что вам нужно …