Основы Web-инжиниринга. Часть 1. Громов Ю.Ю - 94 стр.

UptoLike

ВУЗ: 

ТГТУ | Тамбов

Составители: 

Рубрика: 

Активная кнопка:
<INPUT TYPE=image SRC=images.gif border=0>
</FORM>
Наиболее интересной особенностью графических кнопок является их способность передавать в запросе на сервер коор-
динаты точки, которую указал пользователь, нажимая на кнопку мышью. К сожалению, обработать такое поведение кнопки
в JavaScript-программе не удается.
Передача данных на сервер из формы осуществляется по событию Submit. Это событие происходит при одном из сле-
дующих действий пользователя:
• нажата кнопка Submit;
• нажата графическая кнопка;
• нажата клавиша Enter в форме из одного поля;
• вызван метод submit().
Кнопка Submit. Кнопка Submit представляет собой разновидность поля ввода. Она ведет себя так же, как и обычная
кнопка, но только еще генерирует событие submit (передачу данных на сервер). В этом, с точки зрения JavaScript-
программирования, она абсолютно идентична графическим кнопкам:
<FORM>
<INPUT TYPE=submit VALUE=submit>
</FORM>
В данном примере мы просто перезагружаем страницу.
С точки зрения программирования наибольший интерес представляет возможность перехвата события submit и выпол-
нение при этом действий, отличных от стандартных. Для этой цели у кнопки есть атрибут обработки события click (onClick):
<FORM>
<INPUT TYPE=submit VALUE=Submit onClick="return false;">
</FORM>
При нажатии на кнопку перезагрузки страницы не происходит – передача данных на сервер отменена. Обработчик дей-
ствует так же, как обработчик события submit в теге Form.
Теперь можно написать собственную программу обработки события submit:
function my_submit()
{
if(window.confirm("Хотите перегрузить страницу?")) return true;
else return false;
}
...
<FORM>
<INPUT TYPE=submit VALUE=Submit onClick="return my_submit();">
</FORM>
Если подтвердить необходимость перезагрузки страницы, она действительно будет перезагружена, а при отказе (cancel)
вы вернетесь в текущую страницу без перезагрузки. Действия могут быть и более сложными. В любом случае, если функция
обработки возвращает значение true, то передача данных на сервер (в нашем примере – перезагрузка страницы) происхо-
дит, иначе (значение false) – данные не передаются.
Единственное поле в форме. Если в форме присутствует одно-единственное поле, и мы в него осуществили ввод и по-
сле этого нажали Enter, то браузер сгенерирует событие submit:
<FORM onSubmit="window.alert('Сделано');return false;">
<INPUT SIZE=10 MAXLENGTH=10>
</FORM>
Перехватить такое событие и обработать можно только за счет программы обработки события submit в теге Form, что и
сделано в примере.
В этом примере, кроме поля ввода, в форме присутствует меню. Если менять значения выбранных альтернатив, то пере-
загрузки не происходит, но стоит изменить значение в поле ввода и нажать Enter, происходит submit, и система выдает окно
предупреждения.
Метод submit()
Метод submit() – это метод формы. Если в программе вызывается метод submit, то данные из формы, к которой
применяется данный метод, передаются на сервер. Усовершенствуем пример с полем ввода и меню выбора (прежде чем вы-
бирать альтернативы, прочтите комментарий под примером):
<FORM onSubmit="window.alert('Сделано');return false;">
<INPUT SIZE=10 MAXLENGTH=10>
<SELECT onChange="form.submit();">
<OPTION>Вариант 1<OPTION>Вариант 2</SELECT>
</FORM>

Страницы