Содержание:
Работа с формами
Сейчас мы поговорим о различных приемах работы сценариев 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 — запоминает результат на очень долгое время, пока пользователь не очистит локальное хранилище браузера. Можно через несколько дней зайти на сайт и увидеть ранее заполненную форму.
Работаю с паспортными данными. Есть сторонний сайт, на который я должен выгружать эти данные. Там много полей input . Я должен их заполнять. Т.к. полей много, хотелось бы это дело автоматизировать. У сайта нет API, поэтому было бы прекрасно подключить к этому сайту скрипт, который будет заполнять поля ввода.
Вопрос: как подключить к сайту свой скрипт?
2 ответа 2
Userjs — это скрипты на javascript, выполняемые браузером после загрузки каждой страницы, и позволяющие модифицировать её содержимое.
Скрипты Userjs можно подключить вручную в профиле браузера (в разных браузерах подключение немного отличается) или же воспользоваться плагинами на подобии Greasemonkey или Tampermonkey (это наиболее популярные, но есть и другие).
Разработка скриптов на заказ. Полезные материалы и примеры шаблонов Human Emulator.
Как написать простой скрипт автозаполнения веб форм на Human Emulator
Очень часто в интернете нам встречаются формы на web страницах.
Эти формы на веб страницах служат для подачи анкет, подачи объявлений, подачи различных заявок, отправки комментариев и много другого.
Часто так случается, что нам регулярно приходится заполнять одни и теже формы на одном или на разных сайтах, например:
подача объявлений на различные интернет доски. Этот процесс превращается в рутину и нам хочется от неё избавится.
Для этого вам всего лишь нужны программы, которые будут это делать за Вас — скажем программа для автоматической подачи объявлений,
или программа для автозаполнения форм или программа для автозаполнения документов и т.д.
На самом деле, всё что вам нужно это программа Human Emulator,
так как она делает все перечисленные выше действия.
К тому же Human Emulator заполняет веб формы любой сложности, написанные в том числе и с иcпользованием ajax и javascript-ов,
умеет обрабатывать капчи и много ещё чего умеет полезного делать,
что пригодится при решении задач типа заполнения веб форм или подачи объявлений.