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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

input и textarea

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

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

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

select и option

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

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

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

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

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

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

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

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

new Option

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

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

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

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

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

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

option.selected Выбрана ли опция. option.index Номер опции среди других в списке <select> . 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 также работает для <fieldset> . element.form Элементы хранят ссылку на свою форму в свойстве form .

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

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

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

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

Извлечение данных из HTML формы с помощью JavaScript

Прежде чем пересылать данные на сервер, введенные пользователем в поля формы на сайте, нужно научится их извлекать. И с этой задачей JavaScript умеет отлично справляться. Существует несколько способов получения данных из HTML форм, но мы в рамках данного урока рассмотрим самый понятный для новичков метод.

HTML + CSS код

Все элементы управления и поля формы должны обязательно находится внутри тега form.

<form action=»#» method=»#» >
<div>
<label>
Имя:
<input type=»text» name=»name» value=»Иван Петров»>
</label>
</div>
<div>
<label>
Возраст:
<input type=»number» name=»age» value=»30″>
</label>
</div>
<div>
<label>
Я согласен с правилами:
<input type=»checkbox» name=»terms» checked>
</label>
</div>
<div>
Тарифный план:
<select name=»plan»>
<option value=»free» selected>Бесплатный</option>
<option value=»simple»>Простой</option>
<option value=»pro»>Профессиональный</option>
</select>
</div>
<div>
<button type=»submit»>Отправить</button>
</div>
</form>

body <
font-family: sans-serif;
font-weight: 700;
background-color: yellow;
>

form div <
margin: 12px;
>

form button <
margin-top: 10px;
font-weight: 700;
padding: 10px 20px;
font-size: large;
>

JavaScript код

После создания формы в HTML, мы можем обратится к элементу form для получения введенных пользователем данных через JavaScript. Наша форма состоит из четырех полей: name, age, terms, plan и одной кнопки submit. Найдем все поля формы по отдельности через селектор, получим данные и запишем их в объект. В дальнейшем этот объект будет передаваться на сервер.

Найдем элемент form по идентификатору с помощью метода document.getElementById.

const form = document.getElementById('form');

При отправки формы сработает событие submit, которое мы будем отслеживать при помощи слушателя addEventListener. Передадим первым параметром отслеживаемое событие submit (клик по кнопке), а вторым параметром название callback-функции. Данная функция запустится сразу после клика по кнопке.

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

function getFormValue(event) <
event.preventDefault();

Что должна делать функция getFormValue? Внутри функции мы получим поля формы и извлечем из них значения.

const name = form.querySelector('[name=»name»]'), //получаем поле name
age = form.querySelector('[name=»age»]'), //получаем поле age
terms = form.querySelector('[name=»terms»]'), //получаем поле terms
plan = form.querySelector('[name=»plan»]'); //получаем поле plan

Создадим объект, в который запишем полученные нами данные. Их текстовых полей получим значения data, а из поля с типом checkbox нам нужно получить состояние checked (отмеченную галочку).

const data = <
name: name.value,
age: age.value,
plan: plan.value,
terms: terms.checked
>;

Для проверки, выведем в консоль объект data.

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

Выводы

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

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

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

HTML + CSS код

body font-family: sans-serif;
font-weight: 700;
background-color: yellow;
>

form div margin: 12px;
>

form button margin-top: 10px;
font-weight: 700;
padding: 10px 20px;
font-size: large;
>

Получение данных формы на jQuery

Статья, в которой рассмотрим различные способы простого извлечения данных из HTML формы. А именно познакомимся с тем, как это сделать с помощью метода each, а также методов jQuery специально предназначенных для этого. Объект FormData в данной статье рассматривать не будем.

jQuery – Получения данных формы с помощью метода each

Работу по извлечению данных c элементов формы посредством метода each рассмотрим на примере.

В минимальном варианте данная последовательность действий состоит из создания пустого объекта JavaScript, перебора элементов формы с помощью метода each и добавления в созданный объект данных соответствующих значениям определённых атрибутов ( name и value ) элементов.

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

Для отправки данных на сервер (например, по технологии AJAX) можно использовать метод jQuery ajax .

jQuery — Сериализация формы

В jQuery для получения всех полей формы input , textarea и select можно использовать следующие методы:

• serialize() — предназначен для сериализации данных формы в строку запроса.
• serializeArray() — выполняет кодирование элементов формы в массив, состоящий из имен и значений.

Методы jQuery serialize и serializeArray оличаются друг от друга только форматом вывода данных. Метод serialize обычно применяется в том случае, когда результат (данные формы) необходимо положить в строку HTTP запроса. Метод serializeArray наоборот, используется тогда, когда результат, который он предоставил, как правило, ещё необходимо обработать.

Например, рассмотрим, как можно перебрать массив, который вернул метод serializeArray , с помощью функции each :

Если же вы собираете данные для того чтобы их передать в метод библиотеки jQuery ajax, то в этом случае неважно, какой из этих методов использовать. Т.к. данный метод может принимать данные, закодированные как с помощью метода serialize , так и посредством serializeArray .

Для того чтобы элемент был сериализован методом serialize или serializeArray , он должен отвечать критериям «successful controls», указанным в спецификации HTML. Первое условие «successful controls» – это наличие у элемента атрибута name . Второе, если форма отправлена не с помощью кнопки submit , то она (имя и значение кнопки) не будет добавлена в возвращаемую методом строку или массив. Третье, значения из элементов checkboxes и radio кнопок ( input с type «radio» или «checkbox») будут включены в набор только в том случае, если они установлены (отмечены). Четвёртое, элементы, которые отключены, обработаны не будут. Т.е. для того чтобы элемент был сериализован, он должен иметь false в качестве значение свойства disabled (другими словами, у элемента обязан отсутствовать атрибут disabled ).

Внимание: Методы serialize и serializeArray не сериализуют данные из элементов, которые используются для выбора файлов.

Разберём пример, в котором в зависимости от нажатай кнопки в форме соберём данные с помощью метода serialize или serializeArray . Для отправки данных на сервер и получения от него ответа будем использовать функцию jQuery ajax . Ответ, который прийдёт с сервера вставим в элемент с идентиикатором form_result .

PHP код, обрабатывающий ajax запрос на сервере:

Вышеприведёный код просто формирует строку из данных формы на сервере, которая затем будет отправлена клиенту (браузеру).

Сериализация формы с помощью методов jQuery serialize и serializeArray