HTMLFormElement: событие submit

Базовая Широко поддерживается

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с июля 2015 года.

Событие submit срабатывает при отправке <form>.

Обратите внимание, что событие submit срабатывает на самом элементе <form>, а не на любом <button> или <input type="submit"> внутри него. Однако событие SubmitEvent, отправляемое для указания того, что действие отправки формы было запущено, содержит свойство submitter, которое представляет собой кнопку, которая была вызвана для отправки запроса.

Событие submit срабатывает при:

нажатии пользователем кнопки отправки,
нажатии пользователем Enter при редактировании поля (например, <input type="text">) в форме,
вызове методом form.requestSubmit() скриптом.

Однако событие не отправляется форме, когда скрипт вызывает метод form.submit() непосредственно.

Примечание: Попытка отправить форму, которая не проходит валидацию, вызывает событие invalid. В этом случае валидация предотвращает отправку формы, и, следовательно, события submit нет.

Синтаксис

Используйте имя события в методах, таких как addEventListener(), или установите свойство обработчика событий.

addEventListener("submit", (event) => {});

onsubmit = (event) => {};

Тип события

A SubmitEvent. Наследует от Event.

Свойства события

Помимо перечисленных ниже свойств, этот интерфейс наследует свойства родительского интерфейса Event.

submitter Только для чтения: Объект HTMLElement, который идентифицирует кнопку или другой элемент, вызвавший отправку формы.

Примеры

В этом примере используется EventTarget.addEventListener() для прослушивания отправки формы и выводит текущую метку времени Event.timeStamp всякий раз, когда это происходит, а затем предотвращает стандартное действие отправки формы.

HTML

<form id="form">
  <label>Test field: <input type="text" /></label>
  <br /><br />
  <button type="submit">Submit form</button>
</form>
<p id="log"></p>

JavaScript

function logSubmit(event) {
  log.textContent = `Form Submitted! Timestamp: ${event.timeStamp}`;
  event.preventDefault();
}

const form = document.getElementById("form");
const log = document.getElementById("log");
form.addEventListener("submit", logSubmit);

Результат

Спецификации

Спецификация
HTML # event-submit
HTML # handler-onsubmit

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`submit_event`	1	12	1	8	3	18	4	10.1	1	1.0	4.4

См. также

Элемент HTML <form>
Связанное событие: invalid

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event