JavaScript Academy · Урок

Событие submit

Обрабатывайте отправку форм и предотвращайте перезагрузку страницы.

Урок 2 из 413 шагов

«Событие submit» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Отправка форм

Событие submit срабатывает при отправке формы — как при нажатии кнопки отправки, так и при нажатии Enter в поле. Именно здесь следует обрабатывать данные формы.

Прослушивание формы

Назначайте обработчик самому элементу form, а не кнопке отправки, чтобы охватить все способы отправки.

const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
  console.log("submitting");
});

Перезагрузка по умолчанию

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

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

Зачем здесь нужен preventDefault

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

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(form);
  // send data without reloading
});

Кнопки отправки

Элемент button с атрибутом type="submit" (это значение по умолчанию внутри формы) запускает отправку. Для кнопок, которые не должны отправлять форму, используйте type="button".

Enter отправляет форму

Нажатие Enter в однострочном текстовом поле отправляет форму, поэтому крайне важно прослушивать саму форму.

requestSubmit

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

form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the event

Чтение данных при отправке

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

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const fd = new FormData(form);
  const obj = Object.fromEntries(fd.entries());
  console.log(obj);
});

Отключение кнопки

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

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const btn = form.querySelector("[type=submit]");
  btn.disabled = true;
});

Сброс формы

form.reset очищает поля и возвращает им значения по умолчанию, а событие reset позволяет отреагировать на это действие.

form.addEventListener("reset", () => {
  console.log("cleared");
});

Элемент-инициатор отправки

Свойство submitter события отправки показывает, какая кнопка его вызвала. Это полезно, когда в форме несколько кнопок отправки.

form.addEventListener("submit", (e) => {
  console.log(e.submitter && e.submitter.value);
});

Быстрая проверка

Выберите наиболее подходящий способ.

Ответь в интерактивном уроке

Итоги

Обрабатывайте отправку с помощью события submit формы, вызывая preventDefault в приложениях на JavaScript. Слушайте саму форму, а не кнопку, чтобы также обрабатывать отправку по клавише Enter. Используйте FormData для чтения полей, requestSubmit — для программной отправки с проверкой, а кнопку отключайте, чтобы избежать повторной отправки.

Можно начать бесплатно

Изучай JavaScript с ИИ-репетитором — бесплатно

Пиши и запускай код прямо в браузере, получай мгновенную помощь от ИИ-репетитора 24/7 и продолжи учиться на сайте или в приложении.

Курсы: 59
Уроки: 200

Начать учиться бесплатно Посмотреть полный курс

Часто задаваемые вопросы

Урок «Событие submit» бесплатный?

Да — полный текст урока «Событие submit» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Событие submit»?

Обрабатывайте отправку форм и предотвращайте перезагрузку страницы. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Событие submit»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy