Событие submit в JavaScript

Событие submit возникает у формы, когда браузер пытается её отправить. Оно удобно не только для обычной отправки данных, но и для форм с несколькими действиями: например, «Сохранить черновик» и «Опубликовать».

Основную логику такой формы лучше держать в одном обработчике submit. Свойство event.submitter подскажет, какая кнопка запустила отправку.

• submit принадлежит форме
• Несколько кнопок отправки
• Свойство event.submitter
• requestSubmit() и submit()
• Итого

submit принадлежит форме

Обработчик назначают элементу form, а не отдельной кнопке. Тогда он сработает и при выборе кнопки отправки, и при отправке с клавиатуры. Перед обработчиком submit браузер выполняет встроенную проверку полей: например, required не пропустит пустое обязательное поле.

Если форма должна отправляться обычным способом, обработчик не нужен. В примере ниже мы вызываем preventDefault(), чтобы остаться на странице и показать результат работы JavaScript.

Несколько кнопок отправки

<form class="article-form">
  <label>
    Заголовок
    <input name="title" required>
  </label>

  <label>
    Текст статьи
    <textarea name="content" rows="5" required></textarea>
  </label>

  <button type="submit" name="action" value="draft">
    Сохранить черновик
  </button>

  <button type="submit" name="action" value="publish">
    Опубликовать
  </button>
</form>

<p class="form-status" aria-live="polite"></p>

const articleForm = document.querySelector('.article-form');
const formStatus = document.querySelector('.form-status');

articleForm.addEventListener('submit', function (event) {
  event.preventDefault();

  const submitButton = event.submitter;

  if (submitButton.value === 'draft') {
    formStatus.textContent = 'Черновик сохранён';
    return;
  }

  formStatus.textContent = 'Статья опубликована';
});

Обе кнопки запускают одну форму и один обработчик. Различается только их значение value. В обычной отправке пара name=“action” и value активной кнопки также попадёт в данные формы.

Не переносите основную логику формы в отдельные обработчики click на кнопках. Событие submit - единая точка, в которой уже прошла встроенная проверка полей и известно действие пользователя.

Свойство event.submitter

event.submitter содержит кнопку или input с типом submit, которые запустили текущую отправку. В примере это одна из двух кнопок формы.

articleForm.addEventListener('submit', function (event) {
  const submitButton = event.submitter;

  console.log(submitButton.name); // action
  console.log(submitButton.value); // draft или publish
});

Свойство полезно, когда обработчик должен выбрать дальнейшее действие. Не ищите нажатую кнопку через event.target: у события submit целью является сама форма.

Если код вызывает requestSubmit() без кнопки, event.submitter может быть равен null. Когда выбор действия важен, передавайте в метод конкретную кнопку отправки.

requestSubmit() и submit()

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

const publishButton = articleForm.querySelector('[value="publish"]');

articleForm.requestSubmit(publishButton);

Метод запустит встроенную проверку полей и событие submit. В обработчике event.submitter будет ссылаться на publishButton, поэтому сработает ветка публикации.

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

Итого

submit обрабатывает попытку отправки формы в одном месте. Если у формы несколько кнопок, через event.submitter можно узнать выбранное действие. Для программной отправки, которая должна пройти проверку и вызвать обработчик, используйте requestSubmit(), а не form.submit().