Свойства selected и selectedIndex

Свойство selectedIndex объекта Select возвращает номер выбранного варианта (нумерация начинается с нуля).

<FORM> Вариант:

<SELECT onChange="form.e.value=selectedIndex;">

<OPTION>Один</OPTION>

<OPTION>Два</OPTION>

</SELECT>

Выбрали индекс: <INPUT NAME=e>

</FORM>

Обратите внимание, что в обработчике события onChange мы ссылаемся на второй элемент формы. На данный момент он не определен, но событие произойдет только тогда, когда мы будем выбирать вариант - к этому моменту поле уже будет определено.

Если список вариантов задан как <SELECT MULTIPLE>, т.е. с возможностью выбора нескольких опций одновременно, то свойство selectedIndex возвратит индекс первой выбранной опции. На этот случай имеется альтернатива: свойство selected у каждого объекта Option. Оно равно true, если данная опция выбрана, и false в противном случае. Пример будет приведен ниже.

Обработчик события onChange объекта Select

Событие Change наступает в тот момент, когда пользователь меняет свой выбор вариантов. Если поле является полем выбора единственного варианта, то все просто - см. предыдущий пример. Посмотрим, что происходит, когда мы имеем дело с полем выбора множественных вариантов:

<FORM>

Фрукты: <SELECT MULTIPLE

onChange="form.e.value='';

for(i=0; i<length; i++)

if(options[i].selected)

form.e.value += options[i].text+', ';">

<OPTION>яблоко</OPTION>

<OPTION>банан</OPTION>

<OPTION>киви</OPTION>

<OPTION>персик</OPTION>

</SELECT><BR>

Выбраны позиции: <INPUT READONLY SIZE=70 NAME=e>

</FORM>

Пример 5.5. Обработчик onChange при выборе множественных вариантов (html, txt)

Обратите внимание на то, что событие Change происходит тогда, когда пользователь выбирает или отменяет какой-либо вариант. Исключение составляет тот случай, когда варианты при выборе последовательно отмечаются (нажатие кнопки мыши на одном элементе, ведение мыши до конечного элемента, отпускание кнопки мыши). В этом случае событие происходит в тот момент, когда пользователь отпускает кнопку мыши, и все отмеченные альтернативы становятся выбранными.

Кнопки

В HTML-формах используется четыре вида кнопок:

<FORM>

<INPUT TYPE=button VALUE="Кнопка типа button">

<INPUT TYPE=submit VALUE="Кнопка отправки">

<INPUT TYPE=reset VALUE="Кнопка сброса">

<INPUT TYPE=image SRC=a.gif> <!-- графическая кнопка -->

</FORM>

В атрибуте кнопки можно задать обработчик события onClick, а в атрибуте формы - обработчики событий onSubmit и onReset. Кроме того, кнопкам и форме соответствуют объекты DOM. Объект, отвечающий кнопке, имеет методclick(). Объект, отвечающий форме, имеет методы submit() и reset(). С точки зрения программирования важен вопрос о взаимодействии этих методов друг с другом и с соответствующими обработчиками событий.

В каком случае при вызове метода (из любого места JavaScript-программы) будет автоматически вызван и соответствующий обработчик события, заданный пользователем в атрибуте кнопки или формы? Ответ здесь следующий:

• при вызове метода click() кнопки вызывается и обработчик события onClick этой кнопки;

• при вызове метода submit() формы не вызывается обработчик события onSubmitформы;

• при вызове метода reset() формы вызывается и обработчик события onResetформы.

Ниже мы на примерах рассмотрим, что это означает на практике. Таким образом, при программном вызове метода submit() нужно позаботиться о дополнительном вызове обработчика события onSubmit, чтобы, например, данные не были отправлены на сервер без предварительной проверки. Как это сделать - мы расскажем ниже. Особое внимание мы уделим также возможности перехвата и генерирования события отправки данных на сервер.