В современных фронтенд-приложениях существует два подхода при работе с формами. В некоторых изменение данных на странице происходит сразу по мере изменения формы. У такой формы нет кнопок «сохранить» или «отправить». Здесь каждый элемент формы связан с обработчиком, который отслеживает любые изменения. Типичный пример – фильтрация данных на странице.
В более классическом варианте отправка формы происходит по кнопке. В таком случае нужно использовать событие submit
самой формы:
const form = document.querySelector(/* селектор формы */);
form.addEventListener('submit', (e) => {
// Если хотим работать с формой через javascript,
// то нужно остановить действие по умолчанию — отправку
e.preventDefault();
// Что-то делаем
});
Почему не повесить событие click
на кнопку отправки формы? Технически так сделать можно, но тогда сломается стандартное поведение. Браузеры позволяют отправлять формы с клавиатуры, нажав клавишу Enter. В таком случае кнопка не нажимается, а форма отправляется.
Сама обработка формы обычно строится так:
- извлекаются данные формы
- выполняется запрос на сервер или меняются данные в приложении
- изменяется внешний вид
Второй и третий пункт мы рассмотрим в следующих уроках, когда поговорим про AJAX. А здесь поговорим о первом — об извлечении данных формы.
Существует два подхода. Сначала рассмотрим неправильный:
const input = document.querySelector(/* селектор поля ввода */);
const form = document.querySelector(/* селектор формы */);
form.addEventListener('submit', (e) => {
e.preventDefault();
const { value } = input;
// Что-то делаем с данными
});
При таком подходе придется работать с каждым элементом формы индивидуально: сначала извлечь их из DOM, а затем — собрать значения. Делать так не нужно, потому что есть правильный способ.
Правильный способ – использовать специальный объект FormData, доступный в браузере. Он позволяет получить значение всех полей формы, для которых указан атрибут name
:
<form method="post">
<input name="email" value="example@example.com">
<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(e.target);
// Теперь с ними можно работать
formData.get('email'); // example@example.com
// values() возвращает итератор, поэтому преобразуем в массив
[...formData.values()]; // ['example@example.com', 'supersecret']
// Тоже итератор
[...formData.entries()];
// [['email', 'example@example.com'], ['password', 'supersecret']]
// Преобразование в обычный объект
Object.fromEntries(formData);
// { email: 'example@example.com', password: 'supersecret' }
});
Извлечение элементов формы
Иногда все же приходится обращаться к элементам формы напрямую. Например, при реализации валидации во время изменения формы, а не ее отправки.
В таких случаях работа с элементами формы идет напрямую:
const input = document.querySelector(/* селектор поля ввода */);
input.addEventListener('change', (e) => {
// Логика
});
Если элементов много, то код, выполняющий запросы в DOM, станет громоздким. Этого можно избежать, если использовать возможности DOM, относящиеся к формам. Каждая форма содержит свойство elements
, которое возвращает объект со всеми элементами данной формы. Ключи объекта – имена элементов, значения – сами элементы:
<form method="post">
<input name="email" value="example@example.com">
<input name="password" value="supersecret">
<input type="submit" value="Sign Up">
</form>
const form = document.querySelector(/* селектор до формы */);
form.elements.email // <input name="email" ...
form.elements.password // <input name="password" ...
// Обработка
form.elements.email.addEventListener('change', () => {
// Обработка
});
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты
- Статья «Как учиться и справляться с негативными мыслями»
- Статья «Ловушки обучения»
- Статья «Сложные простые задачи по программированию»
- Вебинар «Как самостоятельно учиться»
Для полного доступа к курсу нужен базовый план
Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.