Отмена обновления страницы при нажатии кнопки в форме
Быстрый ответ
Для запрета отправки формы и устранения перезагрузки страницы используйте метод 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('ключ');
Такой прием гарантирует, что достижения пользователя не исчезнут, даже если страница будет обновлена или пользователь случайно закроет вкладку.
Полезные материалы: немного теории
- Event: preventDefault() method – Web APIs | MDN — описание использования метода preventDefault в JavaScript.
- Javascript – Stop form refreshing page on submit – Stack Overflow — обсуждение на форуме касательно остановки автоматической отправки форм.
- event.preventDefault() | jQuery API Documentation — Event.preventDefault() в jQuery.
- Using the Fetch API – Web APIs | MDN — инструкция по использованию Fetch API с FormData для отправки HTTP-запросов без перезагрузки.
- HTML Standard — детальное описание элемента форма.
- JavaScript Event Delegation is Easier than You Think — SitePoint — простое руководство по делегированию событий в JavaScript.
- Javascript – event.preventDefault() vs. return false – Stack Overflow — различие между
event.preventDefault()
иreturn false
.