HTML атрибут событий onsubmit

Значение и применение

Атрибут событий onsubmit позволяет задать срабатывание скрипта при отправке формы.

Поддержка браузерами

Спецификации: multipage, multipage

Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры
Совместимостьapi.HTMLFormElement.submit_event
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
submit event✓1✓12✓1✓8✓3✓18✓4✓10.1✓1✓1.0✓4.4✓1

поддерживаетсяс ограниченияминет поддержкинет данных≤31 — не позднее версии 31

Синтаксис

HTML
<element onsubmit = "script" >

Отправку может инициировать кнопка, Enter в поле или form.requestSubmit(). Встроенная проверка выполняется до submit; form.submit() обходит и проверку, и это событие. event.submitter указывает кнопку отправки, когда она есть. preventDefault() отменяет сетевую отправку.

Проверка до submit

Нажмите ▶. Попробуйте отправить пустое поле, затем заполненное. Кнопка с formnovalidate пропускает проверку; обработчик submit отменяет сетевую отправку.

index.html
HTML
<form id="order">
  <p>
    <label>Имя: <input id="customer" name="customer" required /></label>
  </p>
  <button type="submit">Проверить и отправить</button>
  <button type="submit" formnovalidate>Пропустить проверку</button>
</form>
<pre id="log" aria-live="polite">Журнал событий:</pre>
main.js
JavaScript
const form = document.getElementById('order')
const log = document.getElementById('log')
// invalid не всплывает: слушаем его в фазе захвата.
form.addEventListener(
    'invalid',
    (event) => {
        log.textContent += '\ninvalid: ' + event.target.name
    },
    true
)
form.addEventListener('submit', (event) => {
    event.preventDefault()
    log.textContent += '\nsubmit: ' + event.submitter.textContent + ' (сетевая отправка отменена)'
})

Примеры, попробуйте сами

Событие отправки формы

Нажмите ▶. Заполните поля и нажмите кнопку формы. Учебный обработчик не отправляет данные на сервер.

index.html
HTML
<form>
  Напишите нам, что-нибудь:<input type="text" name="mail" />
  <input type="submit" value="Отправить" />
</form>
main.js
JavaScript
document.querySelector('form').addEventListener('submit', function (event) {
    event.preventDefault()
    alert('Получено событие submit. Сетевая отправка отменена.')
})

Отличия HTML 4.01 от HTML 5

Нет.

Где возникает событие

Событие возникает у <form>, а не у кнопки отправки.