Российский государственный гуманитарный университет
Опубликован: 14.08.2003 | Доступ: свободный | Студентов: 23389 / 4435 | Оценка: 4.00 / 3.90 | Длительность: 10:03:00
Лекция 5:

Программируем формы

< Лекция 4 || Лекция 5: 12345 || Лекция 6 >

Кнопки

В 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 у формы

Убедитесь, что нажатие кнопки отправки приводит к следующей последовательности действий браузера:

  1. вызов обработчика события onClick у данной кнопки;
  2. вызов обработчика события onSubmit у формы;
  3. отправка данных формы на сервер.

Соответственно, для выполнения дополнительных действий перед отправкой данных можно поместить код в любой из указанных обработчиков; в частности, поместив в какой-либо из них оператор 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.

< Лекция 4 || Лекция 5: 12345 || Лекция 6 >
Валерий Банатин
Валерий Банатин

function f() { var i=5; k=7; } f(); alert(k);

В примере выдается результат k=7, однако, хоть переменная и не объявлена, она внутри функции, т.е. локальная и не должна быть видима, или вторая и последующие все-таки становятся глобальными?

Дамир Кантюков
Дамир Кантюков

Изучаю курс введение в JavaScript. 4 уроке есть код, где метод присвоен переменной, почему у меня не работает, браузер гугл:

<HTML><HEAD> <SCRIPT> wid = window.open('','','width=750,height=100,status=yes'); wid.document.open(); R = wid.document.write; R('<HTML><HEAD><SCRIPT>var t;<\/SCRIPT></HEAD>'); R('<BODY><H1>Новое окно</H1></BODY></HTML>'); wid.document.close(); </SCRIPT> </HEAD> <BODY> <A HREF="javascript: wid.t=window.prompt('Новое состояние:',''); wid.document.write(wid.t); wid.focus(); void(0);" >Изменим значение переменной t в новом окне</A> </BODY></HTML>