Sdscompany.ru

Компьютерный журнал
0 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Javascript обработчик формы

Обработка данных форм на JavaScript

Дата добавления: 2014-11-28 ; просмотров: 3100 ; Нарушение авторских прав

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

JavaScript – объектно-ориентированный скриптовый язык программирования. Программа на JavaScript никогда не компилируется, а выполняется при помощи интерпретатора, который встроен в любой веб-браузер.

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

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

В теле функции осуществляется проверка на непустое значение в поле username, которое затем выводится внизу страницы путем присвоения его значения свойству innerHTML предварительно созданного элемента

Ниже приведен пример страницы, включающей сценарий JavaScript.

Пример обработки полей формы на JavaScript

if (form.login.value != «») document.getElementById(«result3»).innerHTML = «

Ваш логин: «+form.login.value+«

if (form.pass.value != «») document.getElementById(«result4»).innerHTML = «

Ваш пароль: «+form.pass.value+«

if (form.status[].checked) document.getElementById(«result5»).innerHTML = «

Ваш род занятий: студент

if (form.status[1].checked) document.getElementById(«result5»).innerHTML = «

Ваш род занятий: шклольник

if (form.status[2].checked) document.getElementById(«result5»).innerHTML = «

Ваш род занятий: служащий

if (form.status[3].checked) document.getElementById(«result5»).innerHTML = «

Ваш род занятий: рабочий

if (form.status[4].checked) document.getElementById(«result5»).innerHTML = «

Ваш род занятий: пенсионер

switch (form.region.value) <

case «0»: document.getElementById(«result6»).innerHTML = «

Ваш регион: Москва

«; break;

case «1»: document.getElementById(«result6»).innerHTML = «

Ваш регион: Югра

«; break;

case «2»: document.getElementById(«result6»).innerHTML = «

Ваш регион: Тюменская область

«; break;

case «3»: document.getElementById(«result6»).innerHTML = «

Ваш регион: неизвестен

«; break;

if (form.about_you.value != «») document.getElementById(«result7»).innerHTML = «

Вы оставили о себе следующую информацию: «+form.about_you.value+«

Заполните поля для регистрации:

Формы и 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 .

Читать еще:  Javascript данные формы

Пример


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


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

Проверка формы в JavaScript

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

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

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

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

То есть сначала обращаемся к объекту Document, затем к его свойству Form (через имя формы), потом к имени поля данной формы, и, наконец, к значению поля. Давайте выведем все поля, которые подчиняются этому общему виду:

Читать еще:  Comparator comparing java

var form = document.form1;
document.write(form.firstname.value + «
«);
document.write(form.pass.value + «
«);
document.write(form.number.value + «
«);
document.write(form.message.value + «
«);
document.write(form.rules.value + «
«);
document.write(form.hidefield.value + «
«);
document.write(form.fileupload.value + «
«);
document.write(form.sub.value + «
«);
document.write(form.but.value + «
«);

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

Теперь поговорим об одном особенном элементе формы — radio. Получим доступ к значению radio:

var sex = (document.form1.sex[0].checked)?
document.form1.sex[0].value : document.form1.sex[1].value;

Обратите внимание, что у нас есть два элемента radio, которые находятся в массиве sex. Индексы у них и 1. В данном скрипте мы проверяем, если у нас первый элемент включён (checked), то присваиваем значение первого элемента, иначе присваиваем значение второго элемента. Кстати, если кто не понял, то это такая конструкция оператора условия IF. Разумеется, можно было бы написать и так:

var sex;
if (document.form1.sex[0].checked) sex = document.form1.sex[0].value;
else sex = document.form1.sex[1].value;

Теперь, когда мы получили доступ ко всем полям, давайте с Вами, наконец, сделаем проверку формы. Но сначала давайте добавим в тег атрибут «onSubmit» со значением «return check();«. Данный атрибут будет делать следующее: перед отправкой формы вызывать функцию, которая должна будет вернуть либо true, либо false. Если она вернёт true, то форма отправится на сервер, а если false, то форма не будет отправлена.

Теперь создадим функцию check(), которая должна, во-первых, проверять полностью форму, сообщать пользователю об ошибках, а также возвращать true (если форма полностью правильная), либо false (если форма содержит ошибки).

function check(form) <
var firstname = form.firstname.value;
var pass = form.pass.value;
var message = form.message.value;
var rules = form.rules.value;
var file = form.fileupload.value;
var bad = «»;
if (firstname.length 32)
bad += «Имя слишком длинное» + «n»;
if (pass.length 32)
bad += «Пароль слишком длинный» + «n»;
if (message.length

В данном скрипте мы сначала получаем все данные, нуждающиеся в проверке, и записываем их в переменные. Затем создаём переменную bad, в которую записываем все некорректные данные. Затем идёт целый набор IF, которые проверяют поля в форме и записывают все ошибки в переменную bad. Затем, если переменная bad не пустая (то есть были ошибки), то выводим окно (alert()) с ошибками. И возвращаем false, чтобы форма не была отправлена. Если переменная bad пустая, то дальше просто возвращаем true, чтобы форма была отправлена уже на обработку в «handler.php«.

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

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

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

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

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

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

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

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

  • BB-код ссылки для форумов (например, можете поставить её в подписи):
  • Комментарии ( 51 ):

    Напиши пожалуйста отрывок кода, чтобы ясно было что и куда, связанный вот с этой строчкой «давайте добавим в тег атрибут «onSubmit» со значением «return check();»».

    Программируем формы

    Кнопки

    В HTML-формах используется четыре вида кнопок:

    В атрибуте кнопки можно задать обработчик события onClick , а в атрибуте формы — обработчики событий onSubmit и onReset . Кроме того, кнопкам и форме соответствуют объекты DOM . Объект , отвечающий кнопке, имеет метод click () . Объект , отвечающий форме, имеет методы submit () и reset () . С точки зрения программирования важен вопрос о взаимодействии этих методов друг с другом и с соответствующими обработчиками событий.

    В каком случае при вызове метода (из любого места JavaScript-программы) будет автоматически вызван и соответствующий обработчик события, заданный пользователем в атрибуте кнопки или формы? Ответ здесь следующий:

    • при вызове метода click () кнопки вызывается и обработчик события onClick этой формы;
    • при вызове метода submit () формы не вызывается обработчик события onSubmit формы;
    • при вызове метода reset () формы вызывается и обработчик события onReset формы.

    Ниже мы на примерах рассмотрим, что это означает на практике. Таким образом, при программном вызове метода submit () нужно позаботиться о дополнительном вызове обработчика события onSubmit , чтобы, например, данные не были отправлены на сервер без предварительной проверки. Как это сделать — мы расскажем ниже. Особое внимание мы уделим также возможности перехвата и генерирования события отправки данных на сервер .

    Кнопка button

    Кнопка типа button вводится в форму главным образом для того, чтобы можно было выполнить какие-либо действия либо при ее нажатии пользователем, либо при вызове метода click () .

    Читать еще:  Document forms javascript

    Вызов метода click () у кнопки равносилен нажатию кнопки, что и демонстрирует приведенный пример. Как мы увидим ниже, это же справедливо для любых типов кнопок.

    Кнопка submit

    Кнопка отправки ( submit ) позволяет отправить данные, введенные в форму, на сервер. В простейшем случае — при отсутствии у контейнера

    Для имитации ответа сервера заготовим следующий простой HTML-файл receive . htm :

    Теперь усложним наш пример: добавим обработчики событий onClick (у кнопки отправки) и onSubmit (у формы), и посмотрим на поведение браузера при нажатии кнопки отправки:

    Убедитесь, что нажатие кнопки отправки приводит к следующей последовательности действий браузера:

    1. вызов обработчика события onClick у данной кнопки;
    2. вызов обработчика события onSubmit у формы;
    3. отправка данных формы на сервер.

    Соответственно, для выполнения дополнительных действий перед отправкой данных можно поместить код в любой из указанных обработчиков; в частности, поместив в какой-либо из них оператор return false , мы сможем предотвратить отправку данных .

    Вызов метода click () кнопки отправки равносилен нажатию этой кнопки — произойдут все три вышеперечисленных действия:

    Метод submit() формы

    Вызов метода submit () формы не равносилен нажатию кнопки отправки. При вызове этого метода будет выполнено только третье из вышеперечисленных трех действий — отправка данных на сервер. То, что он не должен порождать вызов обработчика onClick кнопки отправки, вполне понятно — ведь мы пытаемся отправить данные в обход кнопки отправки (которой, кстати, может и не быть вовсе). Но и обработчик события onSubmit у формы тоже не вызывается — это является для многих неожиданным. Не будем судить, насколько это логично (и почему это поведение отличается от поведения метода reset () , см. ниже), а просто проиллюстрируем этот эффект, введя в предыдущий пример ссылку, вызывающую метод submit () :

    Тем самым данные могут уйти на сервер без предварительной проверки JavaScript-скриптом. Каким же образом заставить браузер вызвать обработчик onSubmit ? Для этого существует возможность обратиться к этому обработчику напрямую: document.f.onsubmit() . Остается предусмотреть, что после этого метод submit () должен вызываться не всегда, а только если onSubmit либо не возвратил никакого значения, либо возвратил true , иными словами, если он не возвратил false . Окончательно мы получаем:

    Есть еще один способ инициировать отправку данных формы в обход кнопки отправки (которой, кстати, у формы может и не быть). Если фокус находится на любом текстовом поле формы и пользователь нажмет клавишу Enter, то (в большинстве браузеров) произойдет вызов обработчика события onSubmit формы и отправка данных на сервер.

    Этот способ работает логичнее, чем метод submit () , т.к. отправляемые на сервер данные не избегают предварительной проверки обработчиком onSubmit .

    Обработка форм

    »» В данной статье используется исходный код для примеров. Сохраните эту страницу для тестирования приведенных ниже примеров.

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

    Реагирование на изменение фокуса формы

    Методы blur() и focus() позволяют реагировать на изменения состояния фокуса формы. Обычно эта возможность используется для того, чтобы помочь пользователю сориентироваться в том, какой элемент имеет фокус (и, таким образом, какой элемент будет принимать вводимые данные). Соответствующий пример приведен ниже:

    В этом примере мы выбираем все элементы input и регистрируем функцию в качестве обработчика обоих событий — focus и blur. Эта функция выделяет элемент зеленой рамкой, когда он принимает фокус, и убирает рамку, когда фокус теряется:

    Обратите внимание на то, что здесь использован селектор input. Иными словами, элементы выбираются по дескриптору. В некоторых браузерах этот селектор действует более широко и, в частности, выбирает элементы button, способные инициировать отправку формы. Это означает, что при использовании расширенного селектора граница будет применяться не только к элементам input, но и к элементу button.

    Реагирование на изменение значений формы

    Событие change запускается, когда пользователь изменяет значение элемента form. Это событие особенно полезно, если вы предоставляете совокупную информацию, основанную на значениях, введенных в форме. В примере ниже показано, как это событие можно использовать в документе, представляющем сайт цветочного магазина, для отслеживания общего объема заказа:

    В этом примере в ответ на событие change вычисляется сумма всех значений, введенных в полях input, и результат отображается в элементе span, который перед этим был добавлен в документ. Обратите внимание на то, что для получения значений элементов input используется метод val().

    Реагирование на отправку формы

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

    В этом сценарии регистрируется встроенная функция для обработки события submit. Это событие будет запускаться при выполнении пользователем щелчка на кнопке «Заказать». Если значение первого элемента input равно 0, вызывается метод, preventDefault(), который прервет предусмотренное для формы действие по умолчанию, заключающееся в отправке данных на сервер. При любом другом значении отправка формы выполняется.

    Ссылка на основную публикацию
    Adblock
    detector