Javascript форма ввода данных

При отправке формы срабатывает событие submit , оно обычно используется для проверки (валидации) формы перед её отправкой на сервер или для предотвращения отправки и обработки её с помощью JavaScript.

Метод form.submit() позволяет инициировать отправку формы из JavaScript. Мы можем использовать его для динамического создания и отправки наших собственных форм на сервер.

Давайте посмотрим на них подробнее.

Событие: submit

Есть два основных способа отправить форму:

1. Первый – нажать кнопку или .
2. Второй – нажать Enter , находясь на каком-нибудь поле.

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

1. Перейдите в текстовое поле и нажмите Enter .
2. Нажмите .

Оба действия показывают alert и форма не отправится благодаря return false :

При отправке формы по нажатию Enter в текстовом поле, генерируется событие click на кнопке .

Это довольно забавно, учитывая что никакого клика не было.

Метод: submit

Чтобы отправить форму на сервер вручную, мы можем вызвать метод form.submit() .

При этом событие submit не генерируется. Предполагается, что если программист вызывает метод form.submit() , то он уже выполнил всю соответствующую обработку.

Иногда это используют для генерации формы и отправки её вручную, например так:

Задачи

Модальное диалоговое окно с формой

Создайте функцию showPrompt(html, callback) , которая выводит форму с сообщением ( html ), полем ввода и кнопками OK/ОТМЕНА .

• Пользователь должен ввести что-то в текстовое поле и нажать Enter или кнопку «OK», после чего должна вызываться функция callback(value) со значением поля.
• Если пользователь нажимает Esc или кнопку «ОТМЕНА», тогда вызывается callback(null) .

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

• Форма должна быть в центре окна.
• Форма является модальным окном, это значит, что никакое взаимодействие с остальной частью страницы невозможно, пока пользователь не закроет его.
• При показе формы, фокус должен находиться сразу внутри .
• Клавиши Tab / Shift + Tab должны переключать фокус между полями формы, не позволяя ему переходить к другим элементам страницы.

P.S. HTML/CSS исходного кода к этой задаче содержит форму с фиксированным позиционированием, но вы должны сделать её модальной.

Модальное окно может быть реализовано с помощью полупрозрачного

Так как он перекрывает вообще всё, все клики будут именно по этому

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

input и textarea

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

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

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

select и option

В отличие от большинства других элементов управления,

Полное описание элемента

1. Выведите значение и текст выбранного пункта.
2. Добавьте пункт: .
3. Сделайте его выбранным.

решение

Содержание:

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

Сейчас мы поговорим о различных приемах работы сценариев 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( ). Вызов этого метода меняет состояние флажка.

Пример

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

Свойства

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

Метод

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

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

Пример

Список (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 — запоминает результат на очень долгое время, пока пользователь не очистит локальное хранилище браузера. Можно через несколько дней зайти на сайт и увидеть ранее заполненную форму.