Все способы получения данных из формы в JavaScript

Формы являются одним из важных элементов любого сайта или веб-приложения. Они предназначены для обмена данными между клиентом и сервером. В браузере формы очень вариативны, это: текстовые поля, чекбоксы, радио кнопки, выпадающие списки и многие другие компоненты.

В HTML форма представленна тегом <form> и является блочным элементом, который определяет интерактивную часть веб-страницы. Все элементы управления (такие как <input>, <textarea> или <button>) должны находиться внутри элемента <form>.

В JavaScript форма представлена объектом HtmlFormElement. После её создания в HTML, мы можем к ней обратиться, для получения введенных пользователем данных.

Существует множество способов получить данные из HTML формы, и сегодня мы будем разбирать их на следующем примере:

У нас есть форма сбора данных, состоящая их 4х полей:

• имя | type="text"
• возраст | type="number"
• согласие с правилами использование | type="checkbox"
• план | select
• конпка отправки | submit

Код формы выглядит так:

Во всех приведенных ниже примерах HTML код не изменяется. Теперь перейдем к получению данных с помощью JavaScript.

Метод #1

У нас есть множество методов поиска элементов на странице. Воспользуемся ими, для нахождения всех элементов из которых нам нужно получить данные.

Для начала найдем форму и повесим на неё обработчик события:

далее, относительно формы можем искать поля ввода, например, по имени:

Из полей ввода типа number, text и select'a нам нужно получить свойство value,

а из checkbox – checked. Записываем полученные данные в обьект и выводим в консоль.

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

Метод #2

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

В стороке №5 мы находим все возможные варианты полей ввода, и перебираем их доставая из них значения. Однако в это случае мы все поля обрабатываем одинаковым способом (используем поле value). В случае с input[type="checkbox"] нам нужно другое свойство поля – checked.

Добавим небольшую вспомогательную функцию проверки типа поля ввода:

И проверку на тип данного элемента, с которой полный код будет выглядеть так:

в данном случае все хорошо, однако мы все ещё ищем элементы, есть ли другие способы извлечь данные?

Метод #3

Браузеры предоствляет довольно широкий API для работы с формами.
Все формы, доступные на странице, хранятся в поле document.forms.

Оттуда мы можем получить форму:

• по индексу (в порядке сверху вниз)
• по id формы
• по name формы

У нас есть id, давайте им и воспользуемся:

В самом экземпляре формы её поля ввода хранятся как ключи. Имя (name) поля соответствует ключу в обьекте. Добавляем слушатель события отправки и получаем требуемые данные:

Вывод в консоли:

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

Метод #4

Форма имеет ряд свойств (кроме полей этой самой формы), из которых наиболее важнымсвойство elements, которое содержит коллекцию элементов формы. Работает по такому же принципу как и document.forms.

Получаем все элементы формы из свойства elements, создаем обьект (values), который динамически заполняем в процесе перебора полей формы. Для оброаботки checkbox пользуемся функцией isCheckboxOrRadio из примера выше. Проверка на наличие name, в данном случае, нужна, чтобы отбросить поля формы без данного атрибута, например, button.

Данный способ отлично работает и лишен всех недостатков описанных в предыдущих способах. Однако есть и другие способы достойные внимания.

Метод #5

Получение данных с помошью объекта FormData.

Данный объект позволяет создать набор пар ключ/значение и передать их, используя XMLHttpRequest, однако еще одной его задачей является извлечение данных из формы!

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

С помощью метода .fromEntries это можно сделать в одну строку.

В данном случае проверка функцией isCheckboxOrRadio не потребуется, так как внутри formData будут только элементы с каким-то значением (не отмеченный чекбокс не попадет в конечный обьект).

В случае, если нам нужно работать не с JSON а напрямую с FormData этот способ наиболее предпочтителен.

Метод #6

Заключительный метод, но один из самых интересных – извлечение данных с помощью цыкла for of. Данный цикл был введен в спецификации ES6 и предназначен для итерации по элементам коллекций. Но в отличие от цикла for in при итерациях используется значение, а не ключ.

С его помощью можно перебирать не только массивы, а и многие другие коллекции, такие как:

• строки
• генераторы
• коллекции DOM элементов

Мы просто запускаем данный цикл по самой форме. В переменную field будут последовательно записываться поля формы, из которых мы достаем требуемые значения и атрибуты. Проверка на name нужна чтобы отбросить кнопки (как и и способе №4). Пользуясь for of и вспомогательной функцией isCheckboxOrRadio извлекаем данные из формы без излишних конструкторов.