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 — мы точно работаем с формой в целом вместо отдельных элементов и улучшаем доступность для пользователей без мыши.