Метод 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.

Кнопка reset

Кнопка сброса ( reset ) позволяет вернуть все поля формы в первоначальное состояние, которое они имели при загрузке страницы. Нажатие кнопки сброса приводит к следующей последовательности действий браузера:

1. вызов обработчика события onClick у данной кнопки;

2. вызов обработчика события onReset у формы;

3. восстановление значений по умолчанию во всех полях формы.

Вызов метода click() у кнопки сброса равносилен нажатию этой кнопки, т.е. приводит к тем же трем действиям:

<FORM NAME=f onReset="return confirm('Вы хотите очистить форму?')"><INPUT TYPE=text VALUE="Измените этот текст"><INPUT TYPE=reset VALUE="Кнопка сброса" NAME=s onClick="alert('Вызван обработчик onClick у кнопки сброса')"></FORM><A HREF="javascript: document.f.s.click();void(0);" >Вызвать метод <B>click()</B> кнопки сброса</A>

5.11. Вызов метода click() у кнопки сброса

Есть способы сбросить форму в исходное состояние в обход кнопки сброса (которой, кстати, у формы может и не быть). Во-первых, этовызов метода reset() у формы. Во-вторых, если фокус находится на любом поле или кнопке формы, то можно нажать клавишу Esc. Пример:

Измените текст, а затем нажмите Esc (либо ссылку).<BR><FORM NAME=f onReset="return confirm('Вы хотите очистить форму?')"><INPUT TYPE=text VALUE="Измените этот текст"></FORM><A HREF="javascript: document.f.reset();void(0);" >Вызвать метод <B>reset()</B> формы</A>

5.12. Сброс формы нажатием клавиши Esc

Как можно видеть, оба способа не просто сбрасывают форму, но и вызывают обработчик события onReset формы. Таким образом, методreset() ведет себя более логично и предсказуемо, нежели submit().

Графическая кнопка

Графическая кнопка - это разновидность кнопки отправки. Ее отличие в том, что вместо кнопки с надписью пользователь увидит картинку, по которой можно кликнуть:

Кроме того, когда пользователь кликает по графической кнопке, то на сервер отправятся не только данные, введенные в поля формы, но также и координаты указателя мыши относительно левого верхнего угла изображения. К сожалению, перехватить эти координаты в JavaScript-программе не удается. Если Вам необходимо работать с этими координатами, то вместо графической кнопки рекомендуется создать активную карту с помощью контейнера <MAP>.

Графические кнопки имеют ряд странностей. Например, являясь одновременно и кнопкой, и изображением, они почему-то отсутствуют как в коллекции document.f.elements[], так и в коллекции document.images[] (IE 7, Mozilla Firefox). Как следствие, они не учитываются ни в общем количестве элементов формы ( document.f.length ), ни в общем количестве изображений документа (document.images.length ).

Как же обратиться к такой кнопке? Это можно сделать, например, задав атрибут ID:

и затем в программе написав: var knopka = document.getElementById('d1'). После этого мы можем обращаться к свойствам этой кнопки, например knopka.src, а также к методу knopka.click(). Следующий пример показывает, что вызов метода click()графической кнопки "почти" равносилен нажатию этой кнопки, т.е. последовательно вызывает обработчики onClick кнопки, onSubmitформы и передает данные на сервер (но что при этом передается в качестве координат курсора мыши?):

<FORM ACTION="receive.htm" onSubmit="return confirm('Вы хотите отправить данные?')"><INPUT onClick="alert('Вызван обработчик onClick у графической кнопки')" TYPE="image" SRC="pic.gif" id="d1"></FORM> <A HREF="javascript: var knopka = document.getElementById('d1'); knopka.click(); void(0);" >Вызвать метод <B>click()</B> графической кнопки</A>

5.13. Вызов метода click() у графической кнопки

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

Дата добавления: 2016-05-25; просмотров: 647;