Пусть у нас есть некоторая форма:
<form action="/target/" method="POST">
<input name="test1" value="123">
<input name="test2" value="456">
<input type="submit">
</form>
Пусть мы хотим получить данные этой формы
в виде пар ключ-значение. Понятно,
что для этого нам придется запустить цикл
и в нем сформировать желаемое. В JavaScript,
однако, существует способ попроще - можно
использовать специальный объект FormData,
позволяющий в упорядоченном виде получать
данные формы.
Давайте разберем работу с этим объектом. Для начала получим ссылку на нашу форму:
let form = document.querySelector('form');
Теперь создадим объект с нашей формой:
let formData = new FormData(form);
Можно вывести наш объект в консоль, однако при таком выводе данные формы мы не увидим:
console.log(formData);
Преобразуем наш объект в массив, чтобы увидеть данные формы:
console.log(Array.from(formData));
Дана форма с тремя инпутами. Дана также кнопка.
По нажатию на кнопку получите данные формы
в виде объекта FormData.
Методы FormData
Итак, FormData получает данные формы
в упорядоченном виде. Это как правило нужно,
чтобы отправить эти данные на сервер средствами
JavaScript. При этом в FormData есть
специальные методы, позволяющие получать
и модифицировать данные формы.
Эти методы такие же, как и в URLSearchParams:
get, set, has, append,
delete, getAll
Модифицируйте предыдущую задачу. После получения данных формы добавьте в эти данные еще одну пару ключ-значение и удалите одну из существующих пар.
Итераторы
FormData является итерируемым
объектом. Соответственно в него встроены
итераторы values, keys, entries.
Давайте переберем циклом значения элементов формы:
for (let value of formData.values()) {
console.log(value);
}
А теперь давайте переберем циклом имена элементов формы:
for (let key of formData.keys()) {
console.log(key);
}
А теперь давайте переберем циклом пары ключ-значение элементов формы:
for (let entry of formData.entries()) {
console.log(entry);
}
Дана форма с тремя инпутами. Получите данные этой формы и переберите их циклом.