Бесплатный вебинар
«как найти любимую работу»
Подарки на 150 000 ₽ за участие
Живой эфир
Записи не будет!
00:00:00:00
дн.ч.мин.сек.

Остановка автосабмита форм с кнопками в HTML5 без jQuery

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

Для того, чтобы предотвратить автоматическую отправку формы при нажатии на кнопку, установите атрибут type="button" для элемента <button> или примените метод event.preventDefault() в обработчике событий JavaScript.

HTML
Скопировать код
<form id="myForm">
    <!-- Здесь поля формы -->
    <button type="button" onclick="noSubmit()">Прервать отправку</button>
</form>

<script>
function noSubmit() {
    console.log("Передача данных прервана!");
    // На этом этапе могут следовать дополнительные действия
}
</script>

При активации кнопки "Прервать отправку" происходит вызов функции noSubmit(), что прерывает процесс отправки формы.

Кинга Идем в IT: пошаговый план для смены профессии

Полный контроль: Предотвращение автоматической отправки

Отмена события отправки

В дополнение к использованию type="button", можно предотвратить отправку формы путём перехвата события submit и применения event.preventDefault(). Этот подход обеспечит надёжное управление процессом:

JS
Скопировать код
document.querySelector('#myForm').addEventListener('submit', function(event) {
  event.preventDefault();
  console.log("Автоматическая отправка прервана!");
  // Здесь могут выполняться действия, такие как валидация или асинхронные операции
});

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

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

Прямое прерывание

Альтернативным вариантом может быть использование атрибута onclick, с последующим возвращением значения false для прямого прерывания процесса отправки:

HTML
Скопировать код
<button onclick="console.log('Автоматическая отправка прервана!'); return false;">Остановить</button>

Этот подход прост, но может оказаться недостаточным для выполнения более сложных сценариев, связанных с прямым взаимодействием со скриптами.

jQuery: Решение с элегантностью

Для пользователей jQuery подобная задача может быть решена изящно и легко:

JS
Скопировать код
$('form').on('submit', function(e) {
  e.preventDefault();
  console.log("Отправка формы через jQuery прервана!");
});

Код получается наглядным, позволяет разделить логику и разметку, делая скрипты гибкими и эффективными.

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

Представьте форму как дверь 🚪, а автоотправку — как звонок 🔔. Обычно при нажатии кнопки звонок звонит, и форма отправляется:

plaintext
Скопировать код
Дверь формы: 🚪
Кнопка: (🔔) (Звонок при нажатии)

Мы же стремимся отключить звонок, таким образом, чтобы нажатие на кнопку не инициировало отправку формы:

plaintext
Скопировать код
Дверь формы: 🚪
Кнопка: (🔕) (Нажатие без звона и отправки)

Давайте подробнее рассмотрим принцип работы предложенного метода:

JS
Скопировать код
button.addEventListener('click', function(event){
  event.preventDefault(); // 🔕 Отключаем звонок, т.е. предотвращаем отправку
  console.log("Кнопка нажата, передача данных прервана!");
});

Теперь при нажатии кнопки вы предотвращаете автоматическую отправку и полностью контролируете процесс.

Управление отправкой: Ручное сабмитирование формы

После того, как вы предотвратили автоотправку, вы можете сознательно инициировать отправку формы с помощью метода form.submit():

JS
Скопировать код
document.querySelector('#submitFormBtn').addEventListener('click', function() {
  console.log("Инициирую отправку формы вручную");
  document.getElementById('myForm').submit(); // Запускаем процесс отправки данных
});

Такой подход позволит вам решать о времени отправки формы в сложных ситуациях, например, при работе с API или валидации данных.

HTML5: Стандарт поведения

По спецификации HTML5, если для кнопки не указан тип, по умолчанию она рассматривается как кнопка отправки формы. Обязательно указывайте тип:

HTML
Скопировать код
<button type="button">Кнопка без сабмита</button>
<button type="submit">Отправка данных</button>

Понимание норм HTML5 поможет вам избежать нежелательной отправки формы.

Предотвращение скрытых отправок: Блокировка через Enter

Формы могут быть отправлены при нажатии на Enter, но, обработав событие нажатия клавиши, можно избежать этого:

JS
Скопировать код
document.querySelector('#myForm').addEventListener('keypress', function (e) {
  if (e.key === 'Enter') {
    e.preventDefault();
    console.log("Попытка отправки формы через Enter предотвращена.");
  }
});

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

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

  1. HTMLFormElement: событие submit – Веб-API | MDN — подробное руководство по средству JavaScript для отмены отправки формы.
  2. preventDefault() Event Method — несколько примеров использования preventDefault().
  3. Prevent users from submitting a form by hitting Enter – Stack Overflow — обсуждения и решения вопроса о блокировке отправки формы через Enter.
  4. HTML Standard — документация по поведению форм в HTML5, включая неявную отправку.
  5. Forms: event and method submit – JavaScript.info — информация о применении различных методов отправки форм, включая preventDefault и stopPropagation.
Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей
Как можно предотвратить автоматическую отправку формы при нажатии на кнопку?
1 / 5