Обмен данными

Передача данных на сервер из формы происходит по событию submit. Это событие происходит при одном из следующих действий пользователя:

При описании отображения контейнера FORM на объекты JavaScript мы подробно описали обработку события submit. В данном разделе мы сосредоточимся на сочетании JavaScript-программ в атрибутах полей и обработчиках событий. Особое внимание уделим возможности перехвата/генерации события 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 ведет себя несколько иначе, чем графическая кнопка в Netscape Navigator, но также как графическая кнопка в Internet Explorer(различия со временем наверняка исчезнут :-)). При нажатии на кнопку перезагрузки страницы не происходит - передача данных на сервер отменена. Обработчик работает так же, как и обработчик события submit в контейнере FORM.

Теперь можно написать свою собственную программу обработки события submit:

function my_submit()
{
if(window.confirm("Do you wona to reload page?")) 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('Data submited');return false;">
<input size=10 maxlength=10>
</form>

Перехватить такое событие и обработать можно только за счет программы обработки события submit в контейнере FORM, как это и сделано в примере.

В этом примере кроме поля ввода в форме присутствует меню. Если менять значения выбранных альтернатив, то перезагрузки не происходит, но стоит изменить значение в поле ввода и нажать Enter, происходит submit и мы получаем окно предупреждения.


начало страницы

Метод submit()

Метод submit() - это метод формы. Если в программе вызывается метод submit, то данные из формы, к которой применяется данный метод, передаются на сервер. Усовершенствуем пример с полем ввода и меню выбора(прежде чем выбирать альтернативы прочтите комментарий под примером):

<form onSubmit="window.alert('Data submited');return false;">
<input size=10 maxlength=10>
<select onChange="form.submit();">
<option>Нужно что-то делать<option>Ничего не надо делать</select>
</form>

При выборе альтернативы пользователь сразу инициирует обмен данными с сервером. Событие submit в данном случае обработчиком событий не перехватывается в отличие от нажатия Enter. Такое поведение браузера довольно логично. Если программист вызвал метод submit(), то, наверное, он предварительно проверил данные, которые отправляет на сервер.


начало страницы