| Видимость переменной |
Преподаватель
Вы можете этот курс.
Опубликован: 14.08.2003 | Уровень: для всех | Доступ: свободно
Лекция 5:
Программируем формы
Кнопки
В 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, чтобы, например, данные не были отправлены на сервер без предварительной проверки. Как это сделать - мы расскажем ниже. Особое внимание мы уделим также возможности перехвата и генерирования события отправки данных на сервер.
Кнопка button
Кнопка типа button вводится в форму главным образом для того, чтобы можно было выполнить какие-либо действия либо при ее нажатии пользователем, либо при вызове метода click().
<FORM NAME=f>
<INPUT TYPE=button NAME=b VALUE="Кнопка" onClick="alert('5+7='+(5+7))">
</FORM>
<A HREF="javascript:document.f.b.click();void(0);">Вызвать метод click()</A>Вызов метода click() у кнопки равносилен нажатию кнопки, что и демонстрирует приведенный пример. Как мы увидим ниже, это же справедливо для любых типов кнопок.
Кнопка submit
Кнопка отправки ( submit ) позволяет отправить данные, введенные в форму, на сервер. В простейшем случае - при отсутствии у контейнера <FORM> атрибутов ACTION (его значением по умолчанию является адрес текущей страницы), METHOD (его значением по умолчанию является GET ) и TARGET (его значением по умолчанию является _self ) - стандартным действием браузера при отправке данных на сервер является просто перезагрузка текущей страницы, что подтверждает следующий пример:
<FORM> <INPUT TYPE=submit> </FORM>
Для имитации ответа сервера заготовим следующий простой HTML-файл receive.htm:
<HTML><BODY>Данные приняты!</BODY></HTML>
Теперь усложним наш пример: добавим обработчики событий onClick (у кнопки отправки) и onSubmit (у формы), и посмотрим на поведение браузера при нажатии кнопки отправки:
<FORM NAME=f ACTION="receive.htm"
onSubmit="return confirm('Вы хотите отправить данные?')">
<INPUT onClick="alert('Вызван обработчик onClick у кнопки отправки')"
TYPE=submit VALUE="Кнопка отправки" NAME=s>
</FORM>
5.6.
Обработчики onClick у кнопки отправки и onSubmit у формы
Убедитесь, что нажатие кнопки отправки приводит к следующей последовательности действий браузера:
- вызов обработчика события onClick у данной кнопки;
- вызов обработчика события onSubmit у формы;
- отправка данных формы на сервер.
Соответственно, для выполнения дополнительных действий перед отправкой данных можно поместить код в любой из указанных обработчиков; в частности, поместив в какой-либо из них оператор return false, мы сможем предотвратить отправку данных.
Вызов метода click() кнопки отправки равносилен нажатию этой кнопки - произойдут все три вышеперечисленных действия:
<FORM NAME=f ACTION="receive.htm"
onSubmit="return confirm('Вы хотите отправить данные?')">
<INPUT onClick="alert('Вызван обработчик onClick у кнопки отправки')"
TYPE=submit VALUE="Кнопка отправки" NAME=s></FORM>
<A HREF="javascript: document.f.s.click();void(0);"
>Вызвать метод <B>click()</B> кнопки отправки</A>
5.7.
Вызов метода click() у кнопки отправки
Метод submit() формы
Вызов метода submit() формы не равносилен нажатию кнопки отправки. При вызове этого метода будет выполнено только третье из вышеперечисленных трех действий - отправка данных на сервер. То, что он не должен порождать вызов обработчика onClick кнопки отправки, вполне понятно - ведь мы пытаемся отправить данные в обход кнопки отправки (которой, кстати, может и не быть вовсе). Но и обработчик события onSubmit у формы тоже не вызывается - это является для многих неожиданным. Не будем судить, насколько это логично (и почему это поведение отличается от поведения метода reset(), см. ниже), а просто проиллюстрируем этот эффект, введя в предыдущий пример ссылку, вызывающую метод submit():
<FORM NAME=f ACTION="receive.htm"
onSubmit="return confirm('Вы хотите отправить данные?')">
<INPUT onClick="alert('Вызван обработчик onClick у кнопки отправки')"
TYPE=submit VALUE="Кнопка отправки" NAME=s></FORM>
<A HREF="javascript: document.f.submit();void(0);"
>Вызвать метод <B>submit()</B> формы</A>
5.8.
Метод submit() не вызывает обработчика onSubmit
Тем самым данные могут уйти на сервер без предварительной проверки JavaScript-скриптом. Каким же образом заставить браузер вызвать обработчик onSubmit? Для этого существует возможность обратиться к этому обработчику напрямую: document.f.onsubmit(). Остается предусмотреть, что после этого метод submit() должен вызываться не всегда, а только если onSubmit либо не возвратил никакого значения, либо возвратил true, иными словами, если он не возвратил false. Окончательно мы получаем:
<FORM NAME=f ACTION="receive.htm"
onSubmit="return confirm('Вы хотите отправить данные?')">
<INPUT onClick="alert('Вызван обработчик onClick у кнопки отправки')"
TYPE=submit VALUE="Кнопка отправки" NAME=s></FORM>
<A HREF="javascript:
if(document.f.onsubmit() != false)
document.f.submit(); void(0);"
>Вызвать <B>submit()</B> с преварительной проверкой onSubmit</A>
5.9.
Принудительный вызов onSubmit перед submit()
Есть еще один способ инициировать отправку данных формы в обход кнопки отправки (которой, кстати, у формы может и не быть). Если фокус находится на любом текстовом поле <INPUT TYPE=text> формы и пользователь нажмет клавишу Enter, то (в большинстве браузеров) произойдет вызов обработчика события onSubmit формы и отправка данных на сервер.
Введите текст и нажмите Enter:<BR>
<FORM ACTION="receive.htm"
onSubmit="return confirm('Вы хотите отправить данные?')">
<INPUT TYPE=text VALUE="Текст вводить здесь:" SIZE=50>
</FORM>
5.10.
Отправка данных формы нажатием клавиши Enter
Этот способ работает логичнее, чем метод submit(), т.к. отправляемые на сервер данные не избегают предварительной проверки обработчиком onSubmit.
