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

Контейнер FORM

Если рассматривать программирование на JavaScript в исторической перспективе, то первыми объектами, для которых были разработаны методы и свойства, стали поля форм. Обычно контейнер FORM и поля форм именованы:

<FORM NAME=fname METHOD=get>
<INPUT NAME=iname SIZE=30 MAXLENGTH=30>
</FORM>

Поэтому в программах на JavaScript к ним обращаются по имени:

document.fname.iname.value="Текст";

Того же эффекта можно достичь, используя коллекции форм и элементов, обращаясь к форме и к элементу либо по индексу, либо по имени:

document.forms[0].elements[0].value="Текст";
document.forms['fname'].elements['iname'].value="Текст";

Рассмотрим подробнее объект Form, который соответствует контейнеру FORM. Его свойства, методы и события используются для задания реакции на действия пользователя, например, изменения значений полей или нажатие кнопок.

length
 action
 method
 target
 encoding
 elements[]

reset() 
 submit()

Reset
 Submit

Свойства объекта Form

Свойство action

Свойство action отвечает за вызов CGI-скрипта. В нем указывается URL этого скрипта. Но там, где можно указать URL, можно указать и его схему javascript:, например:

<FORM METHOD=post ACTION="javascript: alert('Работает!');">
<INPUT TYPE=submit VALUE="Продемонстрировать JavaScript в ACTION">
</FORM>

Обратите внимание на тот факт, что в контейнере FORM указан атрибут METHOD. В данном случае это сделано для того, чтобы к URL, заданному в атрибуте ACTION, не дописывался символ " ?". Дело в том, что методом доступа по умолчанию является метод GET. В этом методе при обращении к ресурсу из формы создается элемент URL под названием search. Этот элемент предваряется символом " ?", который дописывается в конец URL скрипта. В нашем случае это привело бы к неправильной работе JavaScript-кода, поскольку конструкция вида

alert('Строка');?

провоцирует ошибку JavaScript. Метод POST передает данные формы скрипту в теле HTTP-сообщения, поэтому символ " ?" не добавляется к URL, и ошибка не генерируется. При этом применение void(0) отменяет перезагрузку документа, и браузер не генерирует событие Submit, т.е. не обращается к серверу при нажатии на кнопку, как это было бы при стандартной обработке формы.

Свойство method

Свойство method определяет метод доступа к ресурсам HTTP-сервера из программы-браузера. В зависимости от того, как автор HTML-страницы собирается получать и обрабатывать данные из формы, он может выбрать тот или иной метод доступа. На практике чаще всего используются методы GET и POST.

JavaScript-программа может изменить значение этого свойства. В предыдущем разделе метод доступа в форме был указан явно. Теперь мы его переопределим в момент исполнения программы:

<FORM NAME=f ACTION="javascript: alert('Работает!');">
<SCRIPT>
document.write('По умолчанию установлен метод: '+document.f.method+'.<BR>');
</SCRIPT>
<INPUT TYPE=button onClick="document.f.method='post'" VALUE="Сменить метод на POST">
<INPUT TYPE=button onClick="document.f.method='get'" VALUE="Сменить метод на GET"><BR>
<INPUT TYPE=submit VALUE="JavaScript в ACTION">
</FORM>

По умолчанию установлен метод GET.

В данном примере стоит обратить внимание на два момента:

1. Прежде чем открывать окно предупреждения, следует нажать кнопку "Метод POST". Если этого не сделать, то появится сообщение об ошибке JavaScript. Здесь все выглядит достаточно логично. Формирование URL происходит при генерации события submit, а вызов скрипта - после того, как событие сгенерировано. Поэтому вставить переопределение метода в обработчик события нельзя, так как к этому моменту будет уже сгенерирован URL, который, в свою очередь, будет JavaScript-программой с символом " ?" на конце. Переопределение метода должно быть выполнено раньше, чем произойдет событие Submit.
2. В тело документа через контейнер SCRIPT встроен JavaScript-код, который сообщает метод доступа, установленный в форме по умолчанию. Этот контейнер расположен сразу за контейнером FORM. Ставить его перед контейнером FORM нельзя, так как в момент получения интерпретатором управления объект FORM не будет создан, и, следовательно, работать с его свойствами не представляется возможным.

Никаких других особенностей свойство method не имеет. В данном свойстве можно указать и другие методы доступа, отличные от GET и POST, но это требует дополнительной настройки сервера.

Свойство target

Свойство target определяет имя окна, в которое следует загружать результат обращения к CGI-скрипту. При этом всегда есть альтернативы: можно использовать значение этого свойства внутри JavaScript-программ для указания окна или фрейма, куда требуется загружать результат работы CGI-скрипта, а можно получить идентификатор окна или задействовать встроенный массив frames[0] и свойства окна opener, top и parent. Кроме того, для загрузки внешнего файла в некоторое окно или фрейм можно также применить метод window.open(). Все эти варианты будут продемонстрированы в разделе "Передача данных во фрейм".

Свойство encoding

Свойство encoding объекта Form (а также атрибут enctype контейнера FORM ) задает, каким образом данные из формы должны быть закодированы перед их отправкой на сервер. Возможные значения:

Коллекция elements[]

При генерации встроенного в документ объекта Form браузер создает и связанный с ним массив ( коллекцию ) полей формы elements[]. Обычно к полям обращаются по имени, но можно обращаться и по индексу массива полей формы:

<FORM NAME=f>
<INPUT NAME=e SIZE=40>
<BR><INPUT TYPE=button VALUE="Ввести текст по имени элемента" 
  onClick="document.f.e.value='Текст введен по имени элемента';">
<BR><INPUT TYPE=button VALUE="Ввести текст по индексу элемента" 
  onClick="document.f.elements[0].value='Текст введен по индексу элемента';">
<BR><INPUT TYPE=reset VALUE="Очистить">
</FORM>

Индексирование полей в массиве начинается с нуля. Общее число полей в форме f доступно двумя способами: как свойство массива document.f.elements.length и как свойство объекта формы: document.f.length.

Методы объекта Form

Метод submit()

Метод submit() позволяет проинициировать передачу введенных в форму данных на сервер:

<FORM NAME=f ACTION="http://www.intuit.ru/rating_students/">
Ваше имя пользователя на intuit:<INPUT NAME=query>
</FORM>
<A HREF="javascript:document.f.submit();">Посмотреть рейтинг</A>

Как видите, кнопки отправки ( submit ) у формы нет, но нажав на ссылку, мы выполняем отправку данных на сервер. Обычно при такой "скрытой" отправке данных на сервер браузеры, в целях безопасности, запрашивают подтверждение, действительно ли пользователь желает отправить данные. Отправка данных путем вызова метода submit() имеет отличия от нажатия пользователем кнопки INPUT типа TYPE=submit ; их мы рассмотрим в конце лекции.

Метод reset()

Метод reset() (не путать с обработчиком события onReset, рассматриваемым ниже) позволяет восстановить значения полей формы, заданные по умолчанию. Другими словами, вызов метода reset() равносилен нажатию на кнопку INPUT типа TYPE=reset, но при этом саму эту кнопку создавать не требуется.

<FORM NAME=f>
<INPUT VALUE="Значение по умолчанию" SIZE=30>
<INPUT TYPE=button VALUE="Изменим текст в поле ввода" 
       onClick="document.f.elements[0].value='Изменили текст';">
</FORM>
<A HREF="javascript:document.f.reset();void(0);">
Установили значение по умолчанию</A>

В данном примере если кликнуть по гипертекстовой ссылке, то в форме происходит восстановление значений полей по умолчанию.

События объекта Form

Событие Submit

Событие Submit возникает (и соответствующий обработчик события onSubmit вызывается) при нажатии пользователем на кнопку типа submit или при выполнении метода submit(). Действие по умолчанию, которое выполняет браузер при возникновении этого события - отправка введенных в поля формы данных на сервер, указанный в атрибуте ACTION, с помощью метода, указанного в атрибуте METHOD, с использованием способа кодирования, указанного в атрибуте ENCTYPE, и с указанием того, что результаты работы CGI-скрипта должны быть показаны в окне или фрейме с именем, указанным в атрибуте TARGET.

Фукцию обработки этого события можно переопределить и даже вовсе отменить. Для этой цели введен атрибут onSubmit="код_программы" у контейнера <FORM>. В нем можно указать действия (JavaScript-код), какие должны выполняться при возникновении этого события. Порядок выполнения этих действий и действий браузера, а также использование оператора return false для отмены последних, полностью аналогичны тем, что описаны ниже для onReset. Пример:

<SCRIPT>
function TestBeforeSend()
{
 if(document.f.query.value=='')
 {
   alert('Пустую строку не принимаем!');
   return false;
 }
 else return true;
}
</SCRIPT>

<FORM NAME=f METHOD=post onSubmit="return TestBeforeSend();"
      ACTION="http://www.intuit.ru/rating_students/">
Ваше имя пользователя на intuit:<INPUT NAME=query>
<INPUT TYPE=submit VALUE="Посмотреть рейтинг">
</FORM>

В этом примере следует обратить внимание на конструкцию return TestBeforeSend(). Сама функция TestBeforeSend() возвращает значения true или false. Соответственно, данные либо отправляются на сервер, либо нет.

Событие Reset

Событие Reset возникает (и соответствующий обработчик события onReset вызывается) при нажатии пользователем на кнопку типа reset или при выполнении метода reset(). Действие по умолчанию, которое выполняет браузер при возникновении этого события - восстановление значений по умолчанию в полях формы. Однако функцию обработки этого события можно переопределить и даже вовсе отменить. Для этой цели введен атрибут onReset="код_программы" у контейнера <FORM>. В нем можно указать действия (JavaScript-код), какие должны выполняться при возникновении этого события. Браузер сначала выполняет эти действия, а затем - свое действие по умолчанию. Но если последним оператором в обработчике onReset будет return false, то действие браузера по умолчанию выполняться не будет. Этот прием называется перехватом события. Пример:

<FORM onReset="javascript: alert('Не дадим восстановить!');return false;">
<INPUT VALUE="Измените этот текст" SIZE=30>
<INPUT TYPE=reset VALUE="Восстановить">
</FORM>

Здесь команда return false предотвратила восстановление значения поля. Команда return true, равно как и отсутствие оператора return, позволило бы браузеру продолжить обработку события - и восстановить значение поля.