Доступ к элементам формы
01.07.2010
Как правило, доступ к элементу HTML осуществляется по его идентификатору с помощью метода document.getElementById(). Но для доступа к HTML-формам чаще всего используется свойство document.forms. Свойство document.forms представляет собой массив всех форм на текущей странице. Поэтому если на странице находится лишь одна форма, то она доступна с помощью первого элемента массива document.forms[0]. С другой стороны, форме можно присвоить имя:
<form name="myForm"> ... </form>
Тогда она доступна с помощью элемента массива document.forms['myForm'].
Обращение ко всем элементам формы также осуществляется по имени, которое служит в качестве индекса массива в свойстве elements формы. Допустим, например, что у первой формы на странице имеется элемент с атрибутом name="element1". Тогда доступ к этому элементу осуществляется с помощью следующего кода JavaScript:
document.forms[0].elements['element1']
Имеется и более краткая форма доступа к информации формы. Например, сокращенная форма доступа к элементу element1 формы myForm выглядит так:
document.myForm.element1
Каждый элемент формы поддерживает свойство form, указывающее на ту форму, в которой находится данный элемент. Поэтому выражение this.form часто используется в коде для упрощения доступа к форме на уровне элементов полей данной формы, не прибегая к массиву document.forms.
Доступ к текстовым полям
В HTML поддерживаются три вида текстовых полей:
- Однострочные текстовые поля: <input type="text" />
- Многострочные текстовые поля: <textarea>...</textarea>
- Поля ввода паролей: <input type="password" />
Несмотря на то что эти поля действуют по-разному в браузере, доступ к ним в JavaScript осуществляется практически одинаково. Атрибут value каждого из этих полей содержит текст внутри поля. Его можно использовать как для чтения, так и для записи текста в поле.
В приведенном ниже фрагменте кода демонстрируется два следующих приема: доступ к свойству поля и применение выражения this.form для упрощенного доступа к форме данного поля.
function showText(f) { window.alert(f.elements['textfield'].value); }
<form> <input type="text" name="textfield" /> <input type="button" value="Show text" onclick="showText(this.form);" /> </form>
Доступ к флажкам
Флажок в HTML-форме может находиться в двух состояниях: установленном и сброшенном. Поэтому обращение к флажку их кода JavaScript чаще всего осуществляется для определения его состояния.
Свойство checked флажка возвращает логическое значение true, если флажок установлен, а в противном случае — логическое значение false.
function showStatus(f) { window.alert('The checkbox is ' + (f.elements['chkbox'].checked ? 'checked.' : 'not checked.')); }
<form> <input type="checkbox" name="chkbox" /> <input type="button" value="Show status" onclick="showStatus(this.form);" /> </form>
Доступ к радио-кнопкам
В отличие от флажков, кнопки-переключатели в HTML-форме всегда организуются в группы. Это означает, что у нескольких кнопок-переключателей может быть один и тот же атрибут name, но разные его значения. Следовательно, доступ ко всей группе кнопок-переключателей как к массиву осуществляется следующим образом:
document.forms[номер].elements[группа_кнопок]
Каждый элемент данного массива представляет собой отдельную кнопку-переключатель и поддерживает свойство checked. Это свойство действует таким же образом, как и аналогичное свойство флажка, возвращая логическое значение true, если кнопка-переключатель выбрана, а в противном случае — логическое значение false.
С помощью свойства value доступно также значение каждой кнопки-переключателя. В приведенном ниже фрагменте кода осуществляется циклическое обращение к каждой кнопке-переключателю и вывод ее состояния.
function showStatus(f) { var s= ''; for (var i=0; f.elements['radiobutton'].length; i++) { var bth = f.elements['radiobutton'][i]; 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['selectionlist'].selectedIndex; if (index == -1) { window.alert('No element selected'); } else { var element = f.elements['selectionlist'].options[index]; window.alert('Element #' + index + ' (caption: ' + element.text + ', value: ' + element.value + ') selected'); } }
<form> <select name="selectionlist" size="3"> <option value="R">red</option> <option value="G">green</option> <option value="B">blue</option> </select> <input type="button" value="Show status" onclick="showStatus(this.form);" /> </form>