Как отключить кнопку отправки формы после клика в JS

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

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

<button onclick="this.disabled=true;this.value='Отправка…';return false;">Отправить</button>

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

Детальная проработка: управления состоянием кнопки

Важно учесть различные состояния кнопки. Например, отобразите надпись "Отправка…" в процессе отправки данных, чтобы пользователь понимал, что процесс выполняется в фоновом режиме.

onClick="this.value='Отправка…';this.disabled=true;"

Целостность данных формы: не значит забытое при отключении

Если элементы формы отключены, это может привести к потере важных данных при отправке. Для сохранения информации рекомендуется использовать скрытые поля в форме.

<input type="hidden" id="buttonData" name="buttonData" value="Отправить">

Подробнее об этом расскажет наш спикер на видео

Кроссбраузерность: универсальность прежде всего

Не забывайте о том, что разные браузеры могут по-разному интерпретировать JavaScript и HTML. Разрабатывайте универсальные решения.

Обработка исключений: ошибка отправки

Если отправка формы завершилась неудачей, будет полезно дать пользователю возможность повторить попытку с помощью функции setTimeout, вернув кнопку в активное состояние.

setTimeout(()=> {button.disabled = false}, 3000);

Использование onsubmit: надежный управляющий формами

Для избежания повторной отправки используйте событие onsubmit, оно контролирует разные способы отправки формы, включая нажатие клавиши Enter.

form.onsubmit = function(){ submitBtn.disabled = true; };

Сохранение доступности: учет удобства пользователя

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

Исключите аннулирование данных: сознательное отключение

Перед отключением кнопки оцените влияние этого действия на целостность данных и рассмотрите возможность других способов решения проблемы с использованием JavaScript.

form.onsubmit = function(e){e.preventDefault(); /*дополнительный код*/ };

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

Ниже представлен пример визуализации изменения состояния кнопки отправки:

До клика: [🚉 Кнопка Отправить ✅]

document.getElementById("submitBtn").addEventListener("click", function() {
   this.disabled = true;
   this.value = 'Отправка…';
   setTimeout(() => this.form.submit(), 100);
   return false;
});

После клика: [🚉 Кнопка Отправить ❌ (Использовано)]

Проверка формы: правильная валидация

Убедитесь в правильности заполнения всех полей формы перед отправкой, используя атрибут required.

Индикация процесса: информация об отправке

Помогите пользователю подробно узнать о процессе ожидания, используя соответствующие индикаторы.

button.value = 'Отправка... Пожалуйста, подождите!';

Элегантная обработка ошибок: восстановление функционала

Активируйте кнопку заново, если в процессе отправки возникнут ошибки.

catch(err) {button.disabled = false;}

Усовершенствуйте взаимодействия с помощью CSS: интерактивность для пользователя

Используйте CSS для реализации более изощренного взаимодействия с кнопкой — например, с помощью свойства pointer-events.

button[disabled] { pointer-events: none; }

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

1. Событие onsubmit — изучите мастерство обработки форм с помощью события onsubmit.
2. HTML button disabled Attribute — овладейте применением атрибута disabled для управления состоянием кнопки.
3. pointer-events – CSS — освойте использование pointer-events для повышения качества взаимодействий с пользователем.
4. Debouncing and Throttling — научитесь контролировать частоту обработки событий для увеличения производительности.
5. jQuery.ajax() — улучшите процесс отправки форм через AJAX с использованием jQuery.
6. Валидация форм на стороне клиента — научитесь делать валидацию на стороне клиента для предотвращения ошибок перед отправкой.