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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.