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

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

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

// Без перезагрузок, ура!
document.querySelector('form').addEventListener('submit', function(e) {
  e.preventDefault();
});

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

Настройка поведения кнопки: обновлять страницу или нет?

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

<!-- Я выбираю не обновлять страницу! -->
<button type="button" onclick="getData()">Нажми сюда</button>

Установка типа button помогает предотвратить автоматическую отправку формы. Привязка обработчика onclick к функции getData() дает возможность кнопке реагировать на нажатия без перезагрузки страницы. Функция getData() может использовать событие и выполнять действие event.preventDefault(), либо возвращать false, чтобы полностью остановить действие.

Эффективная работа формы: стоп, страница!

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

<!-- Игра в скрытку закончена -->
<form onsubmit="return false;">

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

// Сегодня не тот день для отправки. Ни сегодня, ни когда!
$('form').on('submit', function(event) {
  event.preventDefault();
});

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

Ajax: запросы без перезагрузки

Ajax или Fetch API являются идеальными возможностями для отправки данных без перезагрузки страницы:

// Отправляем данные украдкой
document.querySelector('form').addEventListener('submit', function(event) {
  event.preventDefault();
  let formData = new FormData(this);
  fetch('submitform.php', {
    method: 'POST',
    body: formData
  }).then(response => response.json())
    .then(data => console.log(data));
});

С помощью метода POST данные отправляются бесшумно, спрятаны в HTTP-теле запроса и не отображаются в URL. Этот подход делает данные более защищенными и допускает передачу большего объема информации, чем при использовании GET-запроса.

Не верьте мифам: всё о возвратах

Важно помнить! Простой return false в обработчике событий без использования preventDefault не всегда работает в соответствии с правилами браузеров. Для достижения надёжности всегда используйте preventDefault. Если вы используете jQuery, не забывайте, что return false также прекращает всплывание событий — это необходимо учитывать.

Визуализация: стоп-сигнал для поезда в Город Обновления 🛑

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

🛤️🚄💨 [Стартовая станция] ➡️ [Город Обновления]

Это путешествие можно отменить:

// Прости, Город Обновления, в другой раз!
button.addEventListener('click', function(event) {
    event.preventDefault();
});

С помощью одного красного сигнала ваше путешествие отменяется. Только спокойный просмотр страницы, никаких неприятностей.

Про скрытые возможности: советы от профессионалов

Вы остановили бесконечное обновление формы и теперь хотите сохранить жизненно важные события прошлого (запросы/действия). Именно для этой цели существует HTML5 Web Storage: localStorage и sessionStorage — это ваш верный инструмент для хранения данных:

// Забыть значимое невозможно
sessionStorage.setItem('ключ', 'значение');

// Путь воспоминаний начинается здесь
let data = sessionStorage.getItem('ключ');

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

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

1. Event: preventDefault() method – Web APIs | MDN — описание использования метода preventDefault в JavaScript.
2. Javascript – Stop form refreshing page on submit – Stack Overflow — обсуждение на форуме касательно остановки автоматической отправки форм.
3. event.preventDefault() | jQuery API Documentation — Event.preventDefault() в jQuery.
4. Using the Fetch API – Web APIs | MDN — инструкция по использованию Fetch API с FormData для отправки HTTP-запросов без перезагрузки.
5. HTML Standard — детальное описание элемента форма.
6. JavaScript Event Delegation is Easier than You Think — SitePoint — простое руководство по делегированию событий в JavaScript.
7. Javascript – event.preventDefault() vs. return false – Stack Overflow — различие между event.preventDefault() и return false.