Jquery обращение по ID

Доступ к элементам формы

Главная >> Блог >> JavaScript и jQuery

Как правило, доступ к элементу HTML осуществляется по его идентификатору с помощью метода document.getElementById(). Но для доступа к HTML-формам чаще всего используется свойство document.forms. Свойство document.forms представляет собой массив всех форм на текущей странице. Поэтому если на странице находится лишь одна форма, то она доступна с помощью первого элемента массива document.forms. С другой стороны, форме можно присвоить имя:

<form name=»myForm»>

</form>

Тогда она доступна с помощью элемента массива document.forms.

Обращение ко всем элементам формы также осуществляется по имени, которое служит в качестве индекса массива в свойстве elements формы. Допустим, например, что у первой формы на странице имеется элемент с атрибутом name=»element1″. Тогда доступ к этому элементу осуществляется с помощью следующего кода JavaScript:

document.forms.elements

Имеется и более краткая форма доступа к информации формы. Например, сокращенная форма доступа к элементу element1 формы myForm выглядит так:

document.myForm.element1

Каждый элемент формы поддерживает свойство form, указывающее на ту форму, в которой находится данный элемент. Поэтому выражение this.form часто используется в коде для упрощения доступа к форме на уровне элементов полей данной формы, не прибегая к массиву document.forms.

Доступ к радио-кнопкам

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

document.forms.elements

Каждый элемент данного массива представляет собой отдельную кнопку-переключатель и поддерживает свойство checked. Это свойство действует таким же образом, как и аналогичное свойство флажка, возвращая логическое значение true, если кнопка-переключатель выбрана, а в противном случае — логическое значение false.

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

function showStatus(f) {
var s= »;
for (var i=0; f.elements.length; i++) {
var bth = f.elements;
s += btn.value + ‘:’ + btn.checked + «\n»;
}
window.alert(s);
} <form>
<input type=»radio» name=»radiobutton» value=»R» />red
<input type=»radio» name=»radiobutton» value=»G» />green
<input type=»radio» name=»radiobutton» value=»B» />blue
<input type=»button» value=»Show status» onclick=»showStatus(this.form);» />
</form>

Доступ к спискам выбора

Список выбора в HTML-форме состоит из двух элементов. Так, элемент <select> закладывает основание для такого списка и предоставляет его имя, хранящееся в атрибуте name. А отдельные элементы списка представлены элементами <option>, предоставляющими следующие данные: надпись элемента списка, отображаемую в окне браузера, а также значение, посылаемое серверу при предъявлении формы.

В JavaScript имеются два средства для доступа к данным из списка выбора:

  • selectedIndex. Предоставляет начинающийся с нуля индекс элемента. выбранного в настоящий момент из списка. Значение -1 этого свойства означает, что ни один из элементов не был выбран, что справедливо только для списков, состоящих из более чем одного элемента.
  • options. Массив со всеми элементами выбора из списка. Каждый такой элемент поддерживает свойство selected. Если это свойство принимает логическое значение true, значит, данный элемент выбран из списка.

Как правило, свойства selectedIndex оказывается достаточно для проверки. А свойство options очень удобно для доступа к выбранному из списка элементу. В этом случае атрибут value выбранного элемента списка предоставляет данные, отправляемые серверу, а свойство text возвращает надпись данного элемента, отображаемую в окне браузера.

В приведенном ниже листинге осуществляется доступ ко всем важным данным, связанным с выбранным элементом списка:

function showStatus(f) {
var index = f.elements.selectedIndex;
if (index == -1) {
window.alert(‘No element selected’);
} else {
var element = f.elements.options;

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *