`submit`

Пользователь отправляет форму, а мы реагируем.

Время чтения: меньше 5 мин

Кратко

Скопировано

Событие submit возникает, когда пользователь отправляет валидную форму. Если форма невалидна и её нельзя отправить, то и submit не будет.

Как пишется

Скопировано

На submit можно подписаться и отреагировать, например, сказать спасибо:

        
          
          document.addEventListener('submit', function () {  alert('Спасибо, что заполнили форму!')})
          document.addEventListener('submit', function () {
  alert('Спасибо, что заполнили форму!')
})

Как понять

Скопировано

Пользователь может отправить форму (и создать для нас событие submit) разными способами. Например, нажать клавишу Enter внутри поля <input> или кликнуть по кнопке <button>.

Открыть демо в новой вкладке

Если мы вытащим, например, кнопку <button> из формы, то событие submit при клике на кнопку уже не произойдёт, потому что связи с формой больше нет. В то же время, нажатие Enter внутри поля <input> будет работать.

        
          
          <div>  <form>    <label for="input-field">      Нажмите Enter в поле:    </label>    <input id="input-field" type="text">  </form></div><div>  <button>Или кликните тут</button></div>
          <div>
  <form>
    <label for="input-field">
      Нажмите Enter в поле:
    </label>
    <input id="input-field" type="text">
  </form>
</div>
<div>
  <button>Или кликните тут</button>
</div>

        
          
          document.addEventListener('submit', function () {  alert('Случился submit')})
          document.addEventListener('submit', function () {
  alert('Случился submit')
})

Открыть демо в новой вкладке

На практике

Скопировано

Алексей Никитченко советует

Скопировано

🛠 За отправкой формы лучше всегда наблюдать через подписку именно на событие submit.

Это удобнее и правильнее, ведь submit связан сразу с каждым элементом формы, а пользователь может отправить её разными способами. Например, нажать на клавишу Enter в поле ввода и не трогать вовсе красивую кнопку подтверждения. В то же время подписка на другие события, например, на click по кнопке, будет лишь косвенно связано с отправкой формы.

В примере ниже подпишемся на событие click по кнопке формы и выведем сообщение с названием элемента, на котором сработает click. Попробуйте нажать Enter внутри поля ввода ⌨️

        
          
          const button = document.getElementById('submit-button')button.addEventListener('click', function (event) {  alert(`Событие поймано на ${event.currentTarget}`)})
          const button = document.getElementById('submit-button')

button.addEventListener('click', function (event) {
  alert(`Событие поймано на ${event.currentTarget}`)
})

Открыть демо в новой вкладке

Хотя мы не трогаем кнопку, событие click на ней всё равно возникает. При отправке формы браузер «синтетически» кликает по кнопке на случай, если какое-то действие привязано к ней, а не к submit. Выходит, мы работаем с одним элементом, а событие возникает на другом.

Иначе с submit — мы точно работаем с формой в целом, вместо отдельных элементов, и улучшаем доступность для пользователей без мыши.

Кратко

Как пишется

Как понять

На практике

Алексей Никитченко советует

Читайте также

.addEventListener()

<form>

Работа с формами

`.addEventListener()`

`<form>`