Отправка формы и событие submit

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Форму отправляет не кнопка, а форма. Кнопка только нажимается — дальше браузер сам решает, что клик по submit-кнопке означает отправку, и возбуждает событие submit уже на самом элементе <form>. Обработчик клика и обработчик отправки — это две разные точки в одной цепочке, и порядок у них строгий: сначала click, потом submit.

Разница не косметическая. К отправке ведёт несколько дорог: клик по кнопке, Enter в текстовом поле, вызов метода из кода, вторая submit-кнопка рядом. Обработчик на click ловит ровно одну из них, обработчик на submit — все сразу. Поэтому правило простое: слушаем форму.

js

const form = document.querySelector("#f");
const go = document.querySelector("#go");
const log = [];

go.addEventListener("click", () => log.push("click"));
form.addEventListener("submit", (event) => {
  event.preventDefault();
  log.push("submit");
});

go.click();
console.log(log.join(" -> "));
console.log(log.length);

страница примера

Сначала предположите, что выведет код

Это называется неявной отправкой. Если в форме есть submit-кнопка, Enter в однострочном поле как бы нажимает её — и дальше всё идёт обычным путём: click, затем submit. Если submit-кнопки нет вообще, а поле одно, форма всё равно отправится, но event.submitter окажется null.

Из кода такую отправку не воспроизвести: синтетический Enter, отправленный через dispatchEvent, неявную отправку не запускает — браузер выполняет её только для настоящего ввода. Для тестов и примеров используйте requestSubmit().

Действие по умолчанию у submit — навигация: браузер собирает значения полей, уходит по адресу из action, и страница перезагружается. event.preventDefault() отменяет именно это. Всё остальное остаётся при вас: данные в полях, состояние страницы, возможность отправить их так, как вы захотите.

Отмена ничего не ломает задним числом. Встроенная валидация к моменту вызова обработчика уже прошла — иначе события бы просто не было. И всплытие тоже продолжается: preventDefault отменяет действие браузера, а не путь события по дереву.

js

const form = document.querySelector("#login");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(form);
  console.log(data.get("user"));
  console.log([...data.keys()].join(","));
});

form.requestSubmit();

страница примера

Сначала предположите, что выведет код

FormData — готовое тело запроса: его можно передать в fetch как есть, браузер сам расставит границы полей и заголовок. Здесь мы только объявляем функцию (сети в песочнице нет), но в настоящем приложении дальше идёт обычный await и разбор ответа.

js

async function sendForm(form) {
  const response = await fetch("/api/login", {
    method: "POST",
    body: new FormData(form),
  });
  return response.ok;
}

console.log(typeof sendForm);

Сначала предположите, что выведет код

Иногда отправку запускает код: пользователь выбрал вариант в списке, истёк таймер, завершилась загрузка файла. Методов два, и разница между ними принципиальная. form.submit() отправляет молча — ни события submit, ни проверки required. form.requestSubmit() ведёт себя как настоящий клик по кнопке: сначала валидация, потом событие, и только потом отправка.

Практический вывод: в коде приложения почти всегда нужен requestSubmit(). Он не обходит вашу же логику — если обработчик вызовет preventDefault(), отправка остановится, как и должна.

js

const form = document.querySelector("#signup");
const input = form.querySelector("input");
let calls = 0;

form.addEventListener("submit", (event) => {
  event.preventDefault();
  calls += 1;
});

form.requestSubmit(); // поле пустое, а оно required
console.log(calls);
console.log(form.checkValidity());

input.value = "rico@example.com";
form.requestSubmit();
console.log(calls);

страница примера

Сначала предположите, что выведет код

Способ отправки	Событие submit	Встроенная валидация
Клик по кнопке type=submit	есть	есть
Enter в текстовом поле	есть	есть
form.requestSubmit()	есть	есть
form.requestSubmit(кнопка)	есть, submitter — эта кнопка	есть
form.submit()	нет	нет

form.submit() — дверь без звонка: страница уходит, а обработчик submit об этом не узнает. Если где-то в проекте остался такой вызов, вешать на submit единственную проверку данных или отправку аналитики уже нельзя.

В форме может быть несколько submit-кнопок: «Сохранить» и «Удалить», «Опубликовать» и «В черновики». Событие у них общее, поэтому обработчику нужен способ узнать, кто именно его вызвал. Это event.submitter — ссылка на нажатую кнопку.

Если у кнопки есть name и value, они попадают и в данные формы — но только если сказать FormData, кто был инициатором: второй аргумент конструктора как раз для этого. Без него пара кнопки в набор не войдёт.

js

const form = document.querySelector("#post");
const buttons = form.querySelectorAll("button");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log(event.submitter.value);
  console.log(new FormData(form, event.submitter).get("action"));
  console.log(new FormData(form).get("action"));
});

form.requestSubmit(buttons[1]);

страница примера

Сначала предположите, что выведет код

Внутри формы кнопка без атрибута type — это type="submit". Не «ничего», не «просто кнопка», а полноценная отправка. Отсюда классический баг: рядом с «Сохранить» ставят «Показать пароль» или «Добавить строку», и страница на каждый клик моргает и обнуляется.

Значений три: submit (по умолчанию) отправляет форму, reset возвращает поля к исходным значениям, button не делает ничего — вся её работа в вашем обработчике. Для любой кнопки, которая не отправляет форму, type="button" обязателен: это дешевле и честнее, чем гасить последствия через preventDefault.

js

const form = document.querySelector("#f3");
const save = document.querySelector("#save");
const calc = document.querySelector("#calc");
let submits = 0;

form.addEventListener("submit", (event) => {
  event.preventDefault();
  submits += 1;
});

console.log(save.type);
console.log(calc.type);

calc.click();
console.log(submits);

save.click();
console.log(submits);

страница примера

Сначала предположите, что выведет код

Отправку ловят на форме: событие submit собирает все пути сразу — клик по submit-кнопке, Enter в поле, вызов из кода.
event.preventDefault() отменяет только навигацию: данные, валидация и всплытие события остаются нетронутыми.
form.requestSubmit() — честный клик: валидация и событие submit. form.submit() отправляет молча, минуя и то, и другое.
event.submitter показывает нажатую кнопку, а new FormData(form, submitter) добавляет её name и value в данные.
Кнопка без type внутри формы отправляет форму. Всё, что не отправка, помечается type="button".

1/3Внутри формы стоит кнопка без атрибута type. Что произойдёт при клике по ней?

2/3Чем form.submit() отличается от form.requestSubmit()?

3/3Обработчик submit вызвал event.preventDefault(). Что именно отменено?

Своя отправка вместо перезагрузки

Форма поиска должна работать без перезагрузки. Повесьте обработчик на форму, отмените стандартную отправку и выведите значение поля query и число полей в наборе данных. Проверьте себя вызовом requestSubmit().

js

const form = document.querySelector("#search");

// TODO: поймать submit, отменить переход,
// вывести query и количество полей

console.log(form.id); // search

страница примера

Сначала предположите, что выведет код

Слушаем форму, а не кнопку: тогда обработчик сработает и на клик, и на Enter, и на программную отправку.

jsлистинг · не запускается

const form = document.querySelector("#search");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(form);
  console.log(data.get("query")); // черепахи
  console.log([...data.keys()].length); // 2
});

form.requestSubmit();

const form = document.querySelector("#search");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(form);
  console.log(data.get("query")); // черепахи
  console.log([...data.keys()].length); // 2
});

form.requestSubmit();

Кнопка в набор не попала: у неё нет атрибута name, а безымянные поля FormData игнорирует. Дальше этот же объект можно отдать в fetch как тело запроса.

Кнопка, которая не должна отправлять

Кнопка «Очистить» должна только опустошать поле, но вместе с этим каждый раз отправляется форма — счётчик submits растёт. Найдите причину и почините разметкой, а не обходным путём.

js

const form = document.querySelector("#note");
const clear = document.querySelector("#clear");
const input = document.querySelector("#text");
let submits = 0;

form.addEventListener("submit", (event) => {
  event.preventDefault();
  submits += 1;
});

clear.addEventListener("click", () => {
  input.value = "";
});

clear.click();
console.log(input.value.length); // 0
console.log(submits); // 1, а хотелось 0

страница примера

Сначала предположите, что выведет код

Причина в умолчании: кнопка без type внутри формы — это submit-кнопка, поэтому после вашего обработчика клика браузер отправляет форму. Достаточно объявить намерение в разметке.

jsлистинг · не запускается

<button id="clear" type="button">Очистить</button>

<button id="clear" type="button">Очистить</button>

После этого submits остаётся 0, а обработчик клика не меняется. Вариант с event.preventDefault() внутри обработчика кнопки тоже сработает, но разметка продолжит врать: кнопка объявлена отправляющей, а поведение переопределено скриптом — и следующий человек починит это заново.

Отправка формы и событие submit

Видеоразбор темы за 5–7 минут

Событие submit, а не кликЛовим отправку там, где она рождается

preventDefault и своя обработкаОтменяем перезагрузку, читаем поля сами

Программная отправка: submit и requestSubmitДва метода с очень разной вежливостью

Кто нажал: event.submitterОдна форма, несколько кнопок, разные действия

type=button против submitКнопка, которая ничего не отправляет

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Своя отправка вместо перезагрузки

Кнопка, которая не должна отправлять