Сообщение об успешной отправке формы js

Обновлено: 20.05.2024

При отправке формы срабатывает событие submit , оно обычно используется для проверки (валидации) формы перед её отправкой на сервер или для предотвращения отправки и обработки её с помощью JavaScript.

Метод form.submit() позволяет инициировать отправку формы из JavaScript. Мы можем использовать его для динамического создания и отправки наших собственных форм на сервер.

Давайте посмотрим на них подробнее.

Событие: submit

Первый – нажать кнопку или .
Второй – нажать Enter , находясь на каком-нибудь поле.

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

Перейдите в текстовое поле и нажмите Enter .
Нажмите .

Оба действия показывают alert и форма не отправится благодаря return false :

При отправке формы по нажатию Enter в текстовом поле, генерируется событие click на кнопке .

Это довольно забавно, учитывая что никакого клика не было.

Метод: submit

При этом событие submit не генерируется. Предполагается, что если программист вызывает метод form.submit() , то он уже выполнил всю соответствующую обработку.

Иногда это используют для генерации формы и отправки её вручную, например так:

Задачи

Модальное диалоговое окно с формой

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

Помимо стандартных средств работы с формами можно использовать JavaScript, чтобы проверять формы на валидность, получать доступ к значениям и отправлять информацию на сервер.

Трюки для работы с формами в JS проще всего показать на примере. В этой статье мы соберём форму заявки на участие в миссии по колонизации Марса. В этой форме мы немножко приправим стандартные HTML-атрибуты динамикой на JS.

Разметка и требования

Имя, чтобы знать, как обращаться в ответном письме.
Почту, чтобы знать, куда это письмо слать.
Возраст — нужны только молодые 🤷‍♂️
Специализацию — инженеры и учёные пригодятся для основной работы, а психологи нужны, чтобы команда друг друга не перегрызла за десятилетнюю колонизаторскую миссию.
Работал ли человек в NASA — это большой плюс.
Фотография, чтобы использовать в печатных материалах.

В целом форма рабочая: обязательные поля не пропустят пустые значения, атрибут type проследит, чтобы вместо почты нам не прислали номер телефона, а по нажатию на кнопку валидная форма отправит все данные.

Но нам кроме всего этого хочется:

чтобы страница при отправке не перезагружалась;
чтобы во время запроса показывался лоадер, при успешной отправке — поздравление, а при ошибке — причина ошибки;
чтобы кнопка была заблокирована до тех пор, пока форма не валидна.

Отправка без перезагрузки

Первым делом настроим отправку формы без перезагрузки страницы.

Предотвращаем отправку данных

Если наше событие находится в переменной event , то для предотвращения поведения по умолчанию мы можем вызвать event . preventDefault ( ) .

Мы можем просто передать функцию handleFormSubmit как второй аргумент в addEventListener , так как он автоматически передаст событие в качестве аргумента для handleFormSubmit .

Получится, что при отправке формы сработает событие submit , которое запустит наш обработчик handleFormSubmit .

В этот обработчик как аргумент event будет передано событие отправки. Мы вызовем event . preventDefault ( ) , и форма не отправится самостоятельно.

Собираем данные из формы

Нам не хочется собирать каждое значение отдельно.

Это может быть долго: если форма состоит из 10 полей, это уже требует достаточно много кода.
Это не масштабируется: если мы захотим добавить ещё пару полей, нам придётся писать код и для этих полей тоже.

Вместо этого мы будем использовать возможности языка, чтобы достать все поля и элементы управления из формы. Напишем функцию serializeForm :

Аргумент функции serializeForm — это элемент формы. Именно элемент — не селектор, а конкретный узел в DOM-дереве.

У форм есть свойство elements , которое содержит в себе все элементы управления и поля этой формы. Именно этим свойством мы воспользуемся, чтобы получить все данные из формы.

Если сейчас мы вызовем эту функцию, передав туда нашу форму как аргумент, то в консоли появится список всех элементов:

Обратите внимание, что тип этого набора элементов — HTMLFormControlsCollection . Это не массив и, чтобы пройтись циклом по списку элементов, нужно превратить его в массив с помощью вызова Array . from ( ) .

Нам останется собрать имя и значение каждого из полей. Для начала, выведем имя и значение каждого элемента в консоль:

Мы получили список элементов, преобразовали его в массив и прошлись по каждому элементу. У каждого элемента получили поля name и value и вывели их в консоль.

В консоли после запуска получим вывод по каждому из полей:

Заметим, что последняя строчка не имеет ни названия, ни значения. Это потому, что последний элемент, который мы проверяли — это кнопка.

Чтобы элементы без названия нам не мешались, мы отфильтруем наш набор. Воспользуемся методом filter , чтобы отбросить элементы с пустым именем. Также заменим метод forEach на map — он соберёт нам массив, который хранит объект с именем и значением каждого отфильтрованного элемента.

На выходе в консоли получится массив из объектов с name и value :

Значения чекбоксов

Сейчас можно заметить, что nasa - experience имеет значение "1" . Это неправильно:

мы не отмечали чекбокс, а значение почему-то "1" ;
в целом хотелось бы, чтобы значение этого поля было булевым.

Для этого мы можем использовать особое свойство checked , которое есть у чекбоксов.

Значение этого поля как раз булево, и мы можем использовать это в нашей функции serializeForm .

Но это свойство мы хотим использовать только на чекбоксе, а не на остальных полях. Это тоже можно сделать. Прочитаем тип элемента и, если он "checkbox" , то возьмём в качестве значения поле checked :

Теперь значение поля nasa - experience будет true , если чекбокс отмечен, и false , если пропущен. Увидим такой вывод:

Формат данных

В целом, нынешний формат данных в виде массива объектов нам может и подойти, но мы с вами используем кое-что лучше — FormData .

FormData — это особый тип данных, который можно использовать для отправки данных формы на сервер.

Мы воспользуемся им, чтобы сохранить данные из формы. Создадим экземпляр с помощью new FormData ( ) , откажемся от массива со значениями и будем добавлять имена полей и их значения в FormData с помощью вызова функции append :

Но так как тип FormData специально создан для работы с формами, можно сделать гораздо проще 🙂

Стоит отметить, что nasa - experience в таком случае попадёт в финальные данные, только если чекбокс отметили. Если его не отметить, то в финальных данных он не окажется.

Когда чекбокс nasa - experience выделен, получим такой вывод:

Когда чекбокс не выделен — такой:

В первом случае чекбокс был отмечен, поэтому в списке есть элемент nasa - experience , во втором случае чекбокс был пропущен, поэтому такого элемента в списке данных нет.

Чтобы проверить, какие данные в себе содержит переменная типа FormData , можно использовать метод . entries ( ) , он выведет список с данными, как в примере выше.

Отправка на сервер

Функция будет асинхронной, потому что работает с сетевыми запросами. В качестве аргумента она принимает FormData и отправляет запрос с помощью вызова fetch . Нам нужно указать правильный заголовок Content - Type у запроса, для формы он 'multipart / form - data' :

Функция вернёт результат запроса к серверу, который мы сможем проверить на ошибки.

Теперь используем эту функцию в обработчике события отправки. Сериализуем форму и передадим её в функцию отправки. Вместо обращения напрямую к форме, будем читать её из объекта события. Форма в объекте события submit будет храниться в свойстве target :

Начнём с лоадера.

Показываем лоадер во время отправки

Добавим его после кнопки и спрячем:

Прячем мы его, потому что хотим показать только во время запроса. Для этого напишем функцию, которые будут управлять его состоянием — делать лоадер видимым, если он не виден сейчас, и скрывать, если он виден. Так как технически это добавление и удаление класса hidden , то можно воспользоваться функцией toggle из classList API:

Вызовем эту функцию до отправки запроса, чтобы показать лоадер, и после запроса, чтобы скрыть. Лоадер будет виден до тех пор, пока запрос не завершится:

Обрабатываем успешную отправку

Обрабатываем ошибки

Мы могли бы вызвать alert сразу на месте, но лучше вынести обработку ошибки в отдельную функцию. Так, если нам захочется добавить какие-то действия по обработке ошибок, нам будет проще ориентироваться в коде.

Если что-то пошло не так, мы увидим причину. Форма останется на месте.

Блокируем кнопку отправки на невалидной форме

Давайте будем её блокировать до тех пор, пока не будут заполнены все поля, которые требуется заполнить.

Напишем функцию, которая будет проверять валидность формы и блокировать кнопку, если требуется. Аргументом она будет принимать событие ввода с клавиатуры на полях ввода.

Так как событие ввода будет происходить на полях, а не на самой форме, то значение event . target — это поле. Чтобы получить форму, воспользуемся свойством form , значением которого является ссылка на родительскую форму.

Проверять валидность формы будем с помощью метода checkValidity ( ) формы. Он запускает стандартные проверки. Результат проверки будем использовать для того чтобы установить свойство disabled кнопки в значение true , если нужно заблокировать, и false , если кнопка должна быть доступна.

Теперь, пока форма не будет заполнена, кнопка будет заблокирована.

Что у нас получилось

Для всего этого мы использовали методы HTML-элементов и элементов форм, которые нам предоставляет браузер и веб-платформа.

Конечно, этим работа с формами не заканчивается. Ещё можно сделать валидацию каждого поля в отдельности, загрузку картинок с возможностью их редактирования, добавить всякие комбо-боксы и нестандартные элементы.

После успешной отправки формы в строке браузера появляются все передаваемые данные. Правильно ли это?
Здравствуйте, дорогие форумчане! Волнует вопрос: после успешной отправки формы (письмо приходит) в.

Не выводится текст о успешной отправки
Начинаю учить php, и вот беда. Когда отправка выполнена, текст о успешной отправки не выводится.

Очистка формы после успешной отправки с работающими куки?
Ранее я задавал вопрос по поводу (сохранения состояния чекбоксов) На что мне ответил примером.

Достаточно плотно работая с легендарными плагинами Contact Form 7 и Popups у меня возник вполне очевидный вопрос “-Как сделать оповещение в виде попап окна после отправке формы?”.

Методом проб и ошибок все таки удалось отобразить попап окна которые сами открываются (и закрываются тоже самостоятельно — конечно же благодаря jQuery) после того как пользователь нажал на кнопку отправки формы.

Если пользователь верно заполнил все данные и форма была отправлена успешно, будет отображен данный попап, который исчезнет через пять с половиной секунд:

Если пользователь ввел не верно данные, или форма и вовсе не была заполнена, пользователь увидит данное окно, которое тоже закроется через 5.5 секунд:

Интервал для закрытия Вы можете указать самостоятельно, непосредственно в самом jQuery скрипте (который находится ниже).

На скринах с попап окнами отображен текст на украинском языке, не пугайтесь тект в экспорте Popups на руссском.

Если Вам этого будет мало и Вы захотите поэкспериментировать выкладываю попутно и PSD который придет Вам на помощь:

Так же после импорта, пропишите данные стили ниже (так как WordPress не включает CSS Popups в файл экспорта).

Читайте также: