Книга: JavaScript. Подробное руководство, 6-е издание

15.9.1. Выбор форм и элементов форм

15.9.1. Выбор форм и элементов форм

Формы и элементы, содержащиеся в них, можно выбрать с помощью стандартных методов, таких как getElementByld() и getElementsByTagName():
var fields = document.getElementById("address").getElementsByTagName("input");

В броузерах, поддерживающих querySelectorAll(), можно выбрать все радиокнопки или все элементы с одинаковыми именами, присутствующие в форме, как показано ниже:

// Все радиокнопки в форме с атрибутом
document.querySelectorAll('«shipping input[type="radio"]');
// Все радиокнопки с атрибутом name="method" в форме с атрибутом
document.querySelectorAll('«shipping input[type="radio"][name="method"]');

Однако, как описывалось в разделах 14.7,15.2.2 и 15.2.3, элемент <form> с установленным атрибутом name или id можно также выбрать другими способами. Элемент <form> с атрибутом name="address" можно выбрать любым из следующих способов:

window.address // Ненадежный: старайтесь не использовать
document.address // Может применяться только к формам с атрибутом name
document.forms.address // Явное обращение к форме с атрибутом name или id
document.forms[n] // Ненадежный: n - порядковый номер формы

В разделе 15.2.3 говорилось, что свойство document.forms ссылается на объект HTMLCollection, позволяющий выбирать элементы <form> по их порядковым номерам, по значению атрибута id или name. Объекты Form сами по себе действуют подобно объектам HTMLCollection, хранящим элементы форм, и могут индексироваться именами или числами. Если первый элемент формы с атрибутом name="address" имеет атрибут name="street”, на него можно сослаться с помощью любого из следующих выражений:

document.forms.address[0]
document.forms.address.street
document.address.street // только для name="address", но не>

Если необходимо явно указать, что выполняется обращение к элементу формы, вместо объекта формы можно индексировать его свойство elements:

document.forms.address.elements[0]
document.forms.address.elements.street

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

<form name="shipping">
  <fieldset>
    <legend>Shipping Method</legend>
    <label>
      <input type="radio" name="method" value="1st">
      первым классом
    </1аbеl>
    <label>
      <input type=”radio" name="method" value="2day">
      3a 2 дня самолетом
    </label>
    <label>
      <input type="radio" name="method" value=”overnite">
      В течение ночи
    </label>
  </fieldset>
</form>

Сослаться на массив радиокнопок в этой форме можно следующим образом:

var methods = document.forms.shipping.elements.method;

Обратите внимание, что элементы <form> имеют HTML-атрибут и соответствующее ему свойство с именем «method», поэтому в данном случае необходимо использовать свойство elements формы вместо прямого обращения к свойству method. Чтобы определить, какой метод доставки выбрал пользователь, необходимо обойти элементы формы в массиве и проверить свойство checked каждого из них:

var shippingjnethod;
for(var і = 0; і < methods.length; і++)
  if (methods[і].checked) shipping_method = methods[i].value;

Со свойствами элементов форм, такими как checked и value, мы поближе познакомимся в следующем разделе.

Оглавление книги


Генерация: 0.837. Запросов К БД/Cache: 3 / 0
поделиться
Вверх Вниз