Обложка канала

Frontend Головного Мозга

Настоящий клондайк для frontend-разработчиков.

Frontend Головного Мозга

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