|
JavaScript: Обращение к данным формы |
 С помощью JavaScript можно отправить данные формы на сервер, очистить ее, а также получить доступ к любому элементу формы для изменения его значений.
Существует несколько способов обращения к формам с использованием объектной модели.
Семейство forms
При создании формы, доступ к ней осуществляется через семейство forms. Для этого требуется либо указать номер формы, соответствующий элементу автоматически создаваемого массива, либо указать имя формы, заданное параметром name (пример 1).
Пример 1. Обращение к форме
alert(document.forms.length) // Получаем общее количество форм на странице
alert(document.forms[0].name) // Узнаем имя первой формы через массив forms
alert(document.forms.data.length) // Определяем количество элементов в форме с именем data
alert(document.forms["data"].length) // То же самое
Нумерация элементов массива всегда начинается с нуля, поэтому обращение к первой форме будет document.forms[0], ко второй — document.forms[1]. Вместо индекса массива можно указывать имя формы, в данном случае используется data — document.forms["data"]. Поскольку удобней всегда обращаться к форме по имени, рекомендуется всегда его задавать
Семейство all
Семейство all является характерным для браузера Internet Explorer, но также поддерживается многими браузерами, кроме Netscape версии 6 и выше. Обращение к форме происходит как к элементу массива с именем, совпадающим с именем формы — document.all["data"] или напрямую — document.all.data (пример 2).
Пример 2. Использование семейства all
alert(document.all["data"].length)
alert(document.all.data.name)
Internet Explorer поддерживает еще один способ обращения к формам — через семейство getElemetById. Пример — document.getElementById("data").length, где data является именем формы.
Получение значений элементов формы
Обращение к элементам формы осуществляется посредством семейства elements или напрямую по имени элемента (пример 3).
Пример 3. Получение значений
alert(document.forms.data.elements.length) // Общее число элементов в форме
alert(document.forms[0].elements[0].value) // Значение первого элемента
alert(document.forms["data"].userName.value) // Значение элемента с именем userName
Нумерация массива, как и в случае с семейством forms ведется с нуля, поэтому обращение к первому элементу формы будет elements[0]. Для большого количество данных в форме, значения элементов лучше получать по их имени. Здесь важна чувствительность к регистру, поэтому имя элемента, указанное параметром name, должно быть написано точно так же и при обращении к нему из JavaScript. Если в примере указать username вместо userName, ошибка не возникнет, но и нужные данные не получим.
Работа с фреймами
В случае использования фреймовой структуры, обращение к данным формы несколько меняется. Доступ из одного фрейма к другому происходит через семейство frames, оно аналогично по использованию семейству forms (пример 4).
Пример 4. Обращение к фрейму
parent.frames[0].forms.data.length // Получаем количество элементов формы с именем data в первом фрейме
parent.frames["main"].forms.data.length // Получаем количество элементов формы с именем data в фрейме main
parent.frames.main.forms.data.length // То же самое
parent.frames.main.forms.data.textfield.value // Значение поля textfield
В общем случае получение значения элемента формы будет таким.
parent.frames.имя_фрейма.имя_формы.имя_поля.value
В примере 5 используется два фрейма, данные из формы фрейма с именем main присваиваются текстовому полю фрейма с именем left.
Пример 5. Использование форм во фреймах
Файл index.html
Файл left.html
Файл main.html
function peredast(f) {
parent.frames.leftFrame.form1.textfield1.value = f.textfield2.value;
}
Для имен фреймом значение регистра также имеет принципиальное значение, при обращении из JavaScript имя фрейма необходимо писать, как оно указано в параметре name.
Резюме
Обращаться к элементам форм лучше всего через семейство forms, оно наиболее универсально и поддерживается всеми браузерами. При большом количестве разных форм на странице им удобнее задавать свои собственные имена и адресоваться к ним по их имени. Разницы в том, как использовать форму — косвенно, как массив или прямо, как свойство семейства, нет. Приведенные записи идентичны по результату.
document.forms["htmlField"].length
document.forms.htmlField.length
Значения элементов форм также удобно получать, обращаясь к ним по их имени, которое задается параметром name.
document.forms["имя формы"].имя элемента.value или
document.forms.имя формы.имя элемента.value
JavaScript чувствителен к регистру, поэтому имена в коде HTML и скрипте должны быть идентичны.
Использовать семейство elements целесообразно при однотипной обработке многих данных. Тогда можно использовать циклы, где в качестве счетчика будет выступать номер элемента формы.
|
Этап применения умений и навыков.
Этап финальной доводки.
Фиксированный размер шрифта на Ваших веб-страничках
Секреты индексации сайта. Сайт может и должен работать. Пример №2
При создании дизайна для Сети вам нужно принять к сведению, что контент будет меняться. О том, чтобы тратить в...
Факторы, влияющие на результаты поиска (поисковой выдачи)
Хороший дизайн
Твой сайт
JavaScript: очистка формы