В современных фронтенд приложениях существует два подхода при работе с формами. В некоторых, изменение данных на странице происходит сразу по мере изменения формы. У такой формы нет кнопки "сохранить" или "отправить". Здесь каждый элемент формы связан с обработчиком, который отслеживает любые изменения. Типичный пример – фильтрация данных на странице.

В более классическом варианте, отправка формы происходит по кнопке. В таком случае нужно использовать событие submit самой формы.

const form = document.querySelector(/* селектор до формы */);
form.addEventListener('submit', (e) => {
  e.preventDefault(); // Если хотим работать с формой через javascript
  // что-то делаем
});

Некоторые разработички отправляют формы не по событию submit, а по клику на кнопке отправки формы. Так делать не нужно.

Сама обработка формы строится обычно так (упрощенно):

  • Извлекаются данные формы
  • Выполняется запрос на сервер / Меняются данные в приложении
  • Изменяется внешний вид

Второй и третий пункт мы рассмотрим в следующих уроках, когда поговорим про Ajax, а здесь поговорим о первом. О том как получить данные формы.

Существует два подхода: правильный и не правильный. Сначала неправильный:

const input = document.querySelector(/* селектор до поля ввода */); 
form.addEventListener('submit', (e) => {
  e.preventDefault();
  const { value } = input;
  // Что-то делаем с данными
});

При таком подходе придется работать с каждым элементом формы индивидуально. Сначала извлечь их из DOM, затем собрать значения. Делать так не нужно, потому что есть правильный способ.

Правильный способ – использовать специальный объект FormData доступный в браузере:

<form method="post">
  <input name="email" value="[email protected]">
  <input name="password" value="supersecret">
  <input type="submit" value="Sign Up">
</form>
const form = document.querySelector(/* селектор нужной формы */);
form.addEventListener('submit', (e) => {
  e.preventDefault();
  // Данные формы извлекаются из DOM автоматически 
  const formData = new FormData(form); // На вход передается элемент формы
  // Теперь с ними можно работать
  formData.get('email'); // [email protected]
  // values() возвращает итератор, поэтому преобразуем в массив
  [...formData.values()]; // ['[email protected]', 'supersecret']
  // Тоже итератор
  [...formData.entries()]; // [['email', '[email protected]'], ['password', 'supersecret']]

  // Для получения объекта нужно воспользоваться lodash
  _.fromPairs([...formData.entries()]); // { email: '[email protected]', password: 'supersecret' }
});
Мы учим программированию с нуля до стажировки и работы. Попробуйте наш бесплатный курс «Введение в программирование» или полные программы обучения по Node, PHP, Python и Java.

Хекслет

Подробнее о том, почему наше обучение работает →