Работа с формами
Как обрабатывать формы, валидировать их и отправлять без перезагрузки страницы с помощью JS.
Помимо стандартных средств работы с формами можно использовать JavaScript, чтобы проверять формы на валидность, получать доступ к значениям и отправлять информацию на сервер. В этой статье мы соберём форму заявки на участие в миссии по колонизации Марса. А также немножко приправим стандартные HTML-атрибуты динамикой на JS
Наша форма заявки будет состоять из шести полей. В форме мы собираем следующие данные: Имя, почту, возраст, специализация, работал ли человек в NASA, фото.
Первым делом настроим отправку формы без перезагрузки страницы.
Перезагрузка страницы — поведение по умолчанию для отправки формы. Чтобы его предотвратить, нам нужно «перехватить» управление в момент отправки и сказать форме, что делать вместо этого.
Чтобы «соединить» форму с нашей будущей собственной отправкой данных, мы напишем функцию, которая будет «слушать» событие отправки и реагировать на него.
Следующий шаг — собрать всё, что необходимо отправить.
Мы будем использовать возможности языка, чтобы достать все поля и элементы управления из формы. мы воспользуемся свойством elements, которое содержит в себе все элементы управления и поля этой формы.
Мы воспользуемся FormData, чтобы сохранить данные из формы. Создадим экземпляр с помощью new FormData(), откажемся от массива со значениями и будем добавлять имена полей и их значения в FormData с помощью вызова функции append.
Также напишем функцию, которая будет вызывать alert с сообщением, которое пришлёт сервер в случае ошибки.
👉 Читать статью полностью
#статья #js
👉 @frontend_mind