Управление активностью кнопки Submit с помощью jQuery

Быстрый ответ

Для того чтобы обеспечить немедленную реакцию на действия пользователя, мы привязываем событие keyup к полю ввода:

$('input').keyup(function() {
  // Если поле ввода не пустое, активирую кнопку 'Участвовать в конкурсе'.
  // В противоположном случае возвращаем сообщение 'Извините, попробуйте ещё раз'.
  $('button[type="submit"]').prop('disabled', !$(this).val());
});

Здесь мы активируем кнопку отправки при заполнении поля ввода и блокируем её, если поле ввода становится пустым, на каждую нажатую клавишу пользователя.

Динамическое взаимодействие с пользователем

Чтобы предложить пользователям лучший опыт взаимодействия, необходимо учесть различные способы ввода данных, включая операции вставки и использование автозаполнения, в дополнение к написанному тексту:

$('input').on('keyup paste input', function() {
  // Теперь мы точно знаем, что данные введены пользователем!
  const isInputFilled = $(this).val().length > 0;
  // Разрешаем отправку, если поле ввода заполнено.
  $('button[type="submit"]').prop('disabled', !isInputFilled);
});

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

Инициализация и поддержание состояния

При загрузке страницы рекомендуется устанавливать кнопку 'Отправить' в неактивное состояние до тех пор, пока не будут выполнены определённые условия. Метод .each() помогает инициировать и поддерживать состояние всех кнопок:

$('button[type="submit"]').each(function() {
  // Изначально все кнопки 'Отправить' будут настроены в режим ожидания.
  $(this).prop('disabled', true);
});

Таким образом, мы предотвращаем преждевременную отправку формы пользователем.

Эффективная альтернатива: нативный JavaScript

Несмотря на удобство jQuery, иногда стоит рассмотреть использование нативного JavaScript:

// Кнопка по 'submitButtonId' найдена! Отлично, деактивируем её.
document.getElementById("submitButtonId").disabled = true;

В некоторых случаях простая реализация на чистом JS оказывается лучшим выбором.

Визуализация

Давайте проиллюстрируем логику активации и деактивации кнопки отправки на jQuery, используя аналогию со светофором:

// 'СТОП! Подождите, не отправляйте ещё форму' для кнопки отправки (🚦КРАСНЫЙ СВЕТ)
$("input[type=submit]").prop('disabled', true);

// 'Вперёд! Можно отправлять форму' для кнопки отправки (🚦ЗЕЛЕНЫЙ СВЕТ)
$("input[type=submit]").prop('disabled', false);

Правила дорожного движения:

При КРАСНОМ свете 🚦: [✋ Остановка отправки]
При ЗЕЛЕНОМ свете 🚦: [🏎️💨 Отправка разрешена!]

Аналогично дорожному движению — Красный свет останавливает отправку и просит подождать, в то время как Зелёный свет указывает на готовность формы к отправке.

Управление свойствами в отличие от атрибутов

В jQuery есть возможность использовать свойства и атрибуты для управления состоянием кнопки. Важно понимать разницу между ними:

• Метод .prop() — лучший выбор для динамического отклика на изменение данных и изменение поведения элементов.
• Атрибуты, изменяемые через .attr(), отражают начальное состояние HTML элемента, которое остаётся неизменным до тех пор, пока его не изменят программно.

Вопросы совместимости

Событие input, представляющее современный способ отслеживания изменений ввода в реальном времени, может не поддерживаться во всех браузерах. Как запасной вариант рекомендуется использовать его в сочетании с классическими событиями keyup или change:

$('input').on('input keyup change', function() {
  // Мы мониторим каждое ваше действие.
  // Здесь следует ваш код.
});

Нахождение баланса между новыми технологиями и общей совместимостью часто ведёт к улучшению пользовательского взаимодействия.

Полезные материалы

1. .prop() | jQuery API Documentation — Узнайте, как установить или получить свойства элементов с помощью .prop().
2. .attr() | jQuery API Documentation — Погрузитесь в модификацию HTML-атрибутов элементов.
3. javascript – Включить/отключить ввод с помощью jQuery? – Stack Overflow — Дискуссия на Stack Overflow о управлении вводом данных с помощью jQuery.
4. .is() | jQuery API Documentation — Научитесь проверять состояния элементов с помощью .is().
5. .on() | jQuery API Documentation — Все о работе со событиями в jQuery с помощью .on().
6. W3Schools Tryit Editor — Совершенствуйте свои навыки включения и отключения кнопок с помощью jQuery на практике.
7. :disabled – CSS: Cascading Style Sheets | MDN — Изучите использование псевдокласса :disabled для оформления неактивных кнопок.
8. GitHub – jquery/jquery: jQuery JavaScript Library — Ознакомьтесь с исходным кодом jQuery на GitHub.