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

Формы и javascript. FORM

Содержание:

Работа с формами

Сейчас мы поговорим о различных приемах работы сценариев JavaScript с HTML-формами.

Если в HTML-документе определена форма, то она доступна сценарию JavaScript как объект, входящий в объект document с именем, заданным атрибутом NAME тега FORM .

Свойства форм

Форма имеет два набора свойств, состав одного из которых фиксированный, а состав другого зависит от того, какие элементы определены в форме.

Свойства первого набора

• action. Значение атрибута ACTION тега FORM .
• encoding. Значение атрибута ENCTYPE тега FORM .
• method. Значение атрибута METHOD тега FORM .
• target. Значение атрибута TARGET тега FORM .
• elements. Массив всех элементов формы.
• length. Размер массива elements.

Большинство свойств первого набора просто отражает значение соответствующих атрибутов тега FORM . Что же касается массива elements , то в нем находятся объекты, соответствующие элементам, определенным в форме. Эти объекты образуют второй набор свойств формы. Адресоваться к этим объектам можно как к элементам массива elements , причем первому элементу формы будет соответствовать элемент с индексом 0, второму — с индексом 1 и т.д. Однако удобнее обращаться к элементам формы по их именам, заданным атрибутом NAME .

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

Кнопки (BUTTON, RESET, SUBMIT)

Свойства

• name. Имя объекта.
• value. Надпись на кнопке.

Метод

• click( ). Вызов этого метода тождественен щелчку мышкой по кнопке.

Пример

Нажатие кнопки

Флажок (CHECKBOX)

Свойства

• name. Имя объекта.
• value. Надпись на кнопке.
• checked. Состояние флажка: true — флажок установлен, false — флажок не установлен.
• defaultChecked. Отражает наличие атрибута CHECKED : true — есть, false — нет.

Метод

• click( ). Вызов этого метода меняет состояние флажка.

Пример

Метод click флажка

Переключатель (RADIO)

Свойства

• name. Имя объекта.
• value. Надпись на кнопке.
• length. Количество переключателей в группе.
• checked. Состояние переключателя: true — переключатель включен, false — выключен.
• defaultChecked. Отражает наличие атрибута CHECKED : true — есть, false — нет.

Метод

• click( ). Вызов этого метода включает переключатель.

Так как группа переключателей имеет одно имя NAME , то к переключателям надо адресоваться как к элементам массива.

Пример

Метод click группы переключателей

Список (SELECT)

Свойства

• name. Имя объекта.
• selectedIndex. Номер выбранного элемента или первого среди выбранных (если указан атрибут MULTIPLE ).
• length. Количество элементов (строк) в списке.
• options. Массив элементов списка, заданных тегами OPTION .

Каждый элемент массива options является объектом со следующими свойствами:

• value. Значение атрибута VALUE .
• text. Текст, указанный после тега OPTION .
• index. Индекс элемента списка.
• selected. Присвоив этому свойству значение true , можно выбрать данный элемент.
• defaultSelected. Отражает наличие атрибута SELECTED : true — есть, false — нет.

Методы

• focus( ). Передает списку фокус ввода.
• blur( ). Отбирает у списка фокус ввода.

Пример

Работа с готовым списком

Кроме работы с готовыми списками JavaScript может заполнять список динамически. Для записи нового элемента списка используется конструктор Option c четырьмя параметрами, первый из которых задает текст, отображаемый в списке, второй — значение элемента списка, соответствующее значению атрибута VALUE , третий соответствует свойству defaultSelected , четвертый — свойству selected .

Пример

Динамическое заполнение списка

Поле ввода (TEXT)

Свойства

• name. Имя объекта.
• defaultValue. Начальное содержимое поля.
• value. Текущее содержимое поля.

Методы

• focus( ). Передает полю фокус ввода.
• blur( ). Отбирает у поля фокус ввода.
• select( ). Выделяет содержимое поля.

Пример

Заполните анкету

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

Текстовая область (TEXTAREA)

Свойства

• name. Имя объекта.
• defaultValue. Начальное содержимое области.
• value. Текущее содержимое области.

Методы

• focus( ). Передает области фокус ввода.
• blur( ). Отбирает у области фокус ввода.
• select( ). Выделяет содержимое области.

Пример

Отправьте телеграмму

Для установки курсора в определенное место textarea-области используйте следующую кросбраузерную функцию:

Поле ввода пароля (PASSWORD)

Свойства

• name. Имя объекта.
• defaultValue. Начальное содержимое поля.
• value. Текущее содержимое поля.

Методы

• focus( ). Передает полю фокус ввода.
• blur( ). Отбирает у поля фокус ввода.
• select( ). Выделяет содержимое поля.

Пример

Регистрация

Как я могу использовать select box как навигационное меню?

При использовании простого JavaScript, вы можете использовать select box для передвижения по сайту. Рассмотрите этот пример: Когда нажимается любая кнопка, форма инициируется и координаты x/y щелчка мыши на кнопке загружаются в объект запроса. Например, если пользователь выбрал Cancel!, объект запроса будет содержать переменные cancel.x и cancel.y. Точно так же щелчок на Continue привел бы к переменным continue.x и continue.y.

Здесь важно отметить, что элементы .x и .y — не переменные объектов continue или cancel, а фактически часть имени «continue.x». Следовательно, нельзя использовать типичный метод для определения существования одного из дочерних объектов запроса: Тем не менее рассмотрите это: Благодаря названным массивам JavaScript, можно проверить какая картинка инициировала форму.

Для некоторых приложений, полезно знать координаты курсора на нажатой картинке. Эта информация, конечно, содержится в парах image_element.x и image_element.y. Следующий серверный JavaScript мог бы использоваться для этого:

Передача данных между формами на различных страницах

В качестве простого примера, предположите, что ваша «домашняя» страница запрашивает имя пользователя, затем использует это имя, чтобы обратиться к пользователю на следующих страницах. Вы можете взять имя, используя форму, затем использовать JavaScript для передачи имени пользователя в следующую страницу, используя URL. Последующая страница могла бы затем анализировать имя пользователя из URL, используя информацию в document.search.

Почему document.formName.selectObject.value не отражает значение выбранного пункта в списке?

Потому что объект работает не таким образом. Правильный и полный синтаксис для доступа к VALUE только что выбранным полем в списке — это: Для доступак тексту элемента используйте свойство text:

Как мне получить значение выбранной в данный момент radio button в radio group или группе checkboxes?

Существует свойство, созданное в объекте form для каждой radio buttons или checkboxes с тем же самым именем. Например, следующий HTML код: приводит к созданию 3-х элементов массива, вызываемых с помощью document.theForm.gender. Чтобы определить значение выбранной кнопки (или checkbox’а), вам нужно проверить свойство checked каждого из элементов. Например:

Для получения и установки значения radio button value на javascript можно использовать следующие функции:

Как мне получить форму, чтобы инициировать процесс запуска клавишей Enter?

Форма отправляется, если нажата клавиша enter, в то время как единственный входной текстовый элемент формы имеет фокус. Вы можете вызывать подобное поведение в форме, имеющей более одного элемента, разбивая форму на ряд отдельных форм, так, чтобы каждая форма имела только один текстовый элемент. Используйте обработчик события onSubmit (или action=»javascript:myFunction();«) для накопления данных из других форм в вашей странице и инициируйте их все сразу.

Как я могу отключить поле текстового ввода?

Используйте обработчик onfocus для вызова функции blur(): Если вы хотите динамически отключать/включать поле, используйте функцию skip (e)

Как сделать загрузку страницы при выборе флажка?

Используйте обработчик OnChange для вызова функции submit():

Сохранение данных в локальное хранилище браузера:

sessionStorage — запоминает результат пока открыт сайт во вкладке(окне), можно свободно перемещаться по сайту, обновлять страницы, но не закрывать окно браузера(вкладку).

localStorage — запоминает результат на очень долгое время, пока пользователь не очистит локальное хранилище браузера. Можно через несколько дней зайти на сайт и увидеть ранее заполненную форму.

Как получить input в JavaScript (1 часть)

На этом уроке мы научимся получать значения, введенные пользователями в поле input и совершать с ними арифметические действия.

HTML разметка

Возьмем за основу бутстраповскую разметку (getbootstrap.com), из раздела Components / Forms. У нас должна получиться форма с двумя полями для ввода чисел и кнопка. Сделаем тип полей у инпутов текстовым, для возможности ввода, как чисел, так и строк.

Умножение чисел

Для того чтобы обратиться конкретно к элементу input на языке JavaScript, нам нужно к этому элементу добавить уникальный идентификатор. Зададим двум полям input два разных идентификатора: inp_1 / inp_2. На одной странице не может быть двух одинаковых id. Иными словами, функция JS, может обратиться к input, только через название id.

Что мы хотим получить в итоге?

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

Событие JavaScript

Для того, чтобы при нажатии на кнопку что-то срабатывало, добавим событие onclick, при клике будет выполняться функция multi() (произвольное название), круглые скобочки обязательны. Они указывают, что это функция.

Итак, у нас появилась форма, куда можно вводить числа, однако клик по кнопке ничего не дает. Пора заняться непосредственно программированием на JS.

Функция на JavaScript

Между тегами script напишем функцию function и название её multi(), затем внутри фигурных скобочек, пропишем выражение, результат которого, увидим на всплывающем окне alert.

JS получить значение input

Надо вывести результат умножения двух чисел в окне alert, но мы не знаем какие числа пользователь ввел, эти данные надо узнать. Для этого, внутри круглых скобочках alert, обращаемся к элементам input, через метод document.getElementById().

Расшифровывается метод так:

В текущем документе получить элемент по id. Этот метод получает весь элемент input, с классами, типом полей, а нам надо узнать только число, введенное пользователем в поле input — значение value.

Получить элемент с id inp_1 и из него вытащить только то, что ввел пользователь. Точно так же, вытаскиваем число и из второго поля.

Таким образом, JavaScript узнает числа, введенные пользователем, умножает их и выдает готовый результат в окне alert, после того, как пользователь кликнет по кнопке.

Команда alert помогает разработчику, отлаживать код, находить ошибки в процессе разработки.

Что такое переменная

Это выражение прекрасно делает свою работу, но при каждом обращении к нему, нам надо переписывать его в таком длинном виде. Это неудобно, код в документе разрастается и становится трудночитаемым. Было бы удобно всю эту длинную запись целиком поместить в маленькую ячейку, на хранение, чтобы вытаскивать оттуда данные, когда потребуется. Такие ячейки и называются в программировании переменными.

Переменные это ячейки, куда можно что-то положить, а затем оттуда вытащить, используя только имя переменной. Продолжение следует..

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

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

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

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

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

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

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

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

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

Copyright © 2010-2020 Русаков Михаил Юрьевич. Все права защищены.

Формы ввода данных в JavaScript

Что такое JavaScript

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

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

Ну а если хотите всё и сразу, то вам сюда:

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

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

Объект Form

Объект Form в JavaScript представляет HTML-форму. Формы доступны в виде элементов массива forms[] , который является свойством объекта Document .

Формы расположены в этом массиве в том же порядке, что и в документе. То есть элемент document.forms[0] ссылается на самую первую форму документа. На последнюю форму документа можно сослаться, например, так:

Программисту будет весьма полезно свойство объекта Form – массив elements[] , который содержит объекты JavaScript различных типов, представляющие различные элементы ввода формы. Элементы этого массива также располагаются в той же последовательности, в которой они расположены в документе. Например, на второй элемент третьей формы документа в текущем окне можно сослаться так:

document. forms[2]. elements[1]

Определение элементов формы

Элементы HTML-формы позволяют создавать простые пользовательские интерфейсы для JavaScript-программ.

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

Пример использования форм в JavaScript

Ну а теперь ещё простой пример использования форм ввода-вывода и на этом первое знакомство закончим.

Здесь у нас форма с четырьмя элементами: поле ввода текста ( text ), поле ввода пароля ( password ), кнопка очистки полей ввода ( reset ) и просто кнопка ( button ).

Для обычной кнопки имеется обработчик ShowPassword() события onClick , который выводит окно с паролем (знаки, введённые в поле password , невидимы пользователю).

Для кнопки reset обработчик события создавать необязательно, потому что нажатие на эту кнопку автоматически очищает все поля формы.

Ну а в начале сценария мы использовали способ доступа к элементам формы через массивы форм и элементов:

Этот код выведет слово “Очистить”, поскольку третьим элементом формы является кнопка с надписью “Очистить”.

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

Эта статья — лишь капля в море знаний о JavaScript. Если хотите испить эту чашу до дна, то изучить этот язык, а также jQuery и Ajax можно здесь:

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