Как получить данные из формы js

FormData

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

let formData = new FormData([form]);

Если передать в конструктор элемент HTML-формы form , то создаваемый объект автоматически прочитает из неё поля.

Его особенность заключается в том, что методы для работы с сетью, например fetch , позволяют указать объект FormData в свойстве тела запроса body .

Он будет соответствующим образом закодирован и отправлен с заголовком Content-Type: multipart/form-data .

То есть, для сервера это выглядит как обычная отправка формы.

Отправка простой формы

Давайте сначала отправим простую форму.

Как вы видите, код очень компактный:

В этом примере серверный код не представлен, он за рамками этой статьи, он принимает POST-запрос с данными формы и отвечает сообщением «Пользователь сохранён».

Методы объекта FormData

С помощью указанных ниже методов мы можем изменять поля в объекте FormData :

• formData.append(name, value) – добавляет к объекту поле с именем name и значением value ,
• formData.append(name, blob, fileName) – добавляет поле, как будто в форме имеется элемент , третий аргумент fileName устанавливает имя файла (не имя поля формы), как будто это имя из файловой системы пользователя,
• formData.delete(name) – удаляет поле с заданным именем name ,
• formData.get(name) – получает значение поля с именем name ,
• formData.has(name) – если существует поле с именем name , то возвращает true , иначе false

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

Ещё существует метод set , его синтаксис такой же, как у append . Разница в том, что .set удаляет все уже имеющиеся поля с именем name и только затем добавляет новое. То есть этот метод гарантирует, что будет существовать только одно поле с именем name , в остальном он аналогичен .append :

• formData.set(name, value) ,
• formData.set(name, blob, fileName) .

Поля объекта formData можно перебирать, используя цикл for..of :

let formData = new FormData(); formData.append('key1', 'value1'); formData.append('key2', 'value2'); // Список пар ключ/значение for(let [name, value] of formData) < alert(`$= $`); // key1=value1, потом key2=value2 >

Отправка формы с файлом

Объекты FormData всегда отсылаются с заголовком Content-Type: multipart/form-data , этот способ кодировки позволяет отсылать файлы. Таким образом, поля тоже отправляются, как это и происходит в случае обычной формы.

Пример такой формы:

 Картинка:   

Отправка формы с Blob-данными

Ранее в главе Fetch мы видели, что очень легко отправить динамически сгенерированные бинарные данные в формате Blob . Мы можем явно передать её в параметр body запроса fetch .

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

Кроме того, серверы часто настроены на приём именно форм, а не просто бинарных данных.

В примере ниже посылается изображение из и ещё несколько полей, как форма, используя FormData :

Пожалуйста, обратите внимание на то, как добавляется изображение Blob :

formData.append("image", imageBlob, "image.png");

Это как если бы в форме был элемент и пользователь прикрепил бы файл с именем «image.png» (3-й аргумент) и данными imageBlob (2-й аргумент) из своей файловой системы.

Сервер прочитает и данные и файл, точно так же, как если бы это была обычная отправка формы.

Итого

Объекты FormData используются, чтобы взять данные из HTML-формы и отправить их с помощью fetch или другого метода для работы с сетью.

Мы можем создать такой объект уже с данными, передав в конструктор HTML-форму – new FormData(form) , или же можно создать объект вообще без формы и затем добавить к нему поля с помощью методов:

• formData.append(name, value)
• formData.append(name, blob, fileName)
• formData.set(name, value)
• formData.set(name, blob, fileName)

Отметим две особенности:

1. Метод set удаляет предыдущие поля с таким же именем, а append – нет. В этом их единственное отличие.
2. Чтобы послать файл, нужно использовать синтаксис с тремя аргументами, в качестве третьего как раз указывается имя файла, которое обычно, при , берётся из файловой системы.

• formData.delete(name)
• formData.get(name)
• formData.has(name)

FormData в JavaScript: работа с формами и отправка данных

FormData — это интерфейс JavaScript, который позволяет создавать объекты для отправки данных в виде пар ключ-значение из форм на веб-странице.

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

Для работы с FormData в JavaScript необходимо создать новый объект FormData. Вот пример кода:

// Создание нового объекта FormData var formData = new FormData(); // Добавление текстового значения в FormData formData.append('username', 'John'); // Добавление файлов в FormData var fileInput = document.getElementById('fileInput'); var files = fileInput.files; for (var i = 0; i < files.length; i++) < formData.append('files', files[i]); >// Добавление данных из элементов формы в FormData var form = document.getElementById('myForm'); var formDataFromForm = new FormData(form); formData.append(formDataFromForm); // Отправка FormData на сервер с помощью XMLHttpRequest var xhr = new XMLHttpRequest(); xhr.open('POST', 'https://example.com/submit'); xhr.onload = function() < if (xhr.status === 200) < console.log('Данные успешно отправлены'); >else < console.log('Ошибка при отправке данных'); >>; xhr.send(formData); 

В приведенном выше коде мы создаем новый объект FormData с помощью конструктора new FormData() . Затем мы добавляем данные в FormData с помощью метода append() . Мы можем добавить текстовые значения, используя пару ключ-значение, а также файлы с помощью метода files объекта, выбранного через элемент . Мы также можем добавить данные из элементов формы целиком, используя конструктор new FormData(form) .

После того, как у нас есть объект FormData с необходимыми данными, мы можем отправить его на сервер, используя объект XMLHttpRequest. В приведенном коде мы открываем асинхронный POST-запрос на сервер https://example.com/submit , и когда запрос завершается, мы проверяем статус ответа. Если статус 200, значит данные успешно отправлены.

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

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

FormData — это мощный инструмент для работы с данными в JavaScript. Он предоставляет удобный и гибкий способ собирать данные с веб-страницы и отправлять их на сервер. Если вы хотите узнать больше о FormData, можете обратиться к официальной документации JavaScript.

Похожие вопросы на: «formdata js «

Substring JS: извлечение части строки с помощью JavaScript

Как получить данные из поля формы?

onclick — грустная затея, скажем прямо. Не говоря уж о том, что автор так и не ответил до сих пор когда ему нужно получать это значение.

25 июн 2015 в 15:16

онклик — это такая вариация псевдокода. В «настоящем сайте», разумеется, должен быть какой-нибудь там jquery с, допустим, .on(‘click’) или там .on(‘submit’), и все такое, да и alert, наверное, не нужен, а нужно что-то сделать с полученным значением, но для иллюстрации принципа, не множа сущности, самое то, как мне кажется.

25 июн 2015 в 15:24

Нет, иллюстрация использования onclick приводит к тому, что его (и только его) потом активно используют. А потом без слёз не взглянешь на то, что наделают. И повторюсь: мы по-прежнему не знаем при каких условиях автору нужно значение. Я поэтому код вообще размещать не стал — посижу, подожду. Сейчас — это чистой воды гадание.

Свойства и методы формы

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

Работать с формами станет намного удобнее, когда мы их изучим.

Навигация: формы и элементы

Формы в документе входят в специальную коллекцию document.forms .

Это так называемая «именованная» коллекция: мы можем использовать для получения формы как её имя, так и порядковый номер в документе.

document.forms.my - форма с именем "my" (name="my") document.forms[0] - первая форма в документе

Когда мы уже получили форму, любой элемент доступен в именованной коллекции form.elements .

Может быть несколько элементов с одним и тем же именем, это часто бывает с кнопками-переключателями radio .

В этом случае form.elements[name] является коллекцией, например:

Эти навигационные свойства не зависят от структуры тегов внутри формы. Все элементы управления формы, как бы глубоко они не находились в форме, доступны в коллекции form.elements .

как «подформа»

Форма может содержать один или несколько элементов внутри себя. Они также поддерживают свойство elements , в котором находятся элементы управления внутри них.

  
info
 
  

Сокращённая форма записи: form.name

Есть более короткая запись: мы можем получить доступ к элементу через form[index/name] .

Другими словами, вместо form.elements.login мы можем написать form.login .

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

В этом легче разобраться на примере:

Обычно это не вызывает проблем, так как мы редко меняем имена у элементов формы.

Обратная ссылка: element.form

Для любого элемента форма доступна через element.form . Так что форма ссылается на все элементы, а эти элементы ссылаются на форму.

Элементы формы

Рассмотрим элементы управления, используемые в формах.

input и textarea

К их значению можно получить доступ через свойство input.value (строка) или input.checked (булево значение) для чекбоксов.

input.value = "Новое значение"; textarea.value = "Новый текст"; input.checked = true; // для чекбоксов и переключателей

Используйте textarea.value вместо textarea.innerHTML

Обратим внимание: хоть элемент . и хранит своё значение как вложенный HTML, нам не следует использовать textarea.innerHTML для доступа к нему.

Там хранится только тот HTML, который был изначально на странице, а не текущее значение.

select и option

Элемент имеет 3 важных свойства:

1. select.options – коллекция из подэлементов ,
2. select.value – значение выбранного в данный момент ,
3. select.selectedIndex – номер выбранного .

Они дают три разных способа установить значение в :

1. Найти соответствующий элемент и установить в option.selected значение true .
2. Установить в select.value значение нужного .
3. Установить в select.selectedIndex номер нужного .

Первый способ наиболее понятный, но (2) и (3) являются более удобными при работе.

Вот эти способы на примере:

Яблоко Груша Банан   

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

Их коллекцию можно получить как select.options , например:

 Блюз Рок Классика   

new Option

Элемент редко используется сам по себе, но и здесь есть кое-что интересное.

В спецификации есть красивый короткий синтаксис для создания элемента :

option = new Option(text, value, defaultSelected, selected);

• text – текст внутри ,
• value – значение,
• defaultSelected – если true , то ставится HTML-атрибут selected ,
• selected – если true , то элемент будет выбранным.

Тут может быть небольшая путаница с defaultSelected и selected . Всё просто: defaultSelected задаёт HTML-атрибут, его можно получить как option.getAttribute(‘selected’) , а selected – выбрано значение или нет, именно его важно поставить правильно. Впрочем, обычно ставят оба этих значения в true или не ставят вовсе (т.е. false ).

let option = new Option("Текст", "value"); // создаст Текст

Тот же элемент, но выбранный:

let option = new Option("Текст", "value", true, true);

Элементы имеют свойства:

option.selected Выбрана ли опция. option.index Номер опции среди других в списке . option.value Значение опции. option.text Содержимое опции (то, что видит посетитель).

Ссылки

• Спецификация: https://html.spec.whatwg.org/multipage/forms.html.

Итого

Свойства для навигации по формам:

document.forms Форма доступна через document.forms[name/index] . form.elements Элементы формы доступны через form.elements[name/index] , или можно просто использовать form[name/index] . Свойство elements также работает для . element.form Элементы хранят ссылку на свою форму в свойстве form .

Значения элементов формы доступны через input.value , textarea.value , select.value и т.д. либо input.checked для чекбоксов и переключателей.

Для элемента мы также можем получить индекс выбранного пункта через select.selectedIndex , либо используя коллекцию пунктов select.options .

Это были основы для начала работы с формами. Далее в учебнике мы встретим ещё много примеров.

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