Элементы формы ява скрипт

Примеры рассмотренные ниже - это помощь для начинающих программистов (чайников-говоря на сленге :) )в разработке программ на ява скрипт. Со временем на сайте появятся ява скрипты которые представляют интерес и для более продвинутых - людей.
Большая часть интерактивных взаимодействий между Web-страницей и пользователем происходит внутри формы. Это именно то место, где запрятана большая часть интерактивных возможностей любого браузера и в которую входят такие элементы формы: текстовые поля, кнопки, флажки опций,списки и пр. Будет рассмотрен также принцип проверки формы перед отправкой на сервер. пример работы с радиокнопками (переключатели, radio, type="radio") .
Как можно было заметить на иерархической структуре объектов (той ее части, что уже изучена и представлена на рис. 1), форма всегда содержится внутри документа. А раз так, то ссылка на объект document должна быть частью обращения к форме и всех ее элементов.

Объект FORM

Ссылка на объект формы FORM задается либо по его расположению в массиве форм, содержащихся в документе, либо же по названию (если атрибуту NAME внутри дескриптора <FORM> присвоено значение). Если в документе используется только одна форма, то она все равно является элементом массива (который состоит из одного элемента) и ссылка на нее будет выглядеть следующим образом:

Обратите внимание на то, что в записи ссылки на объект как элемент массива используется множественное число (т.е. forms а не form); после множественного числа вводятся квадратные скобки с указанием в них числового индекса элемента (первый элемент всегда имеет индекс нуль). Но если форме было присвоено имя, то ссылку можно записать значительно проще:

Форма как объект и контейнер

В упрощенной модели объектов у форм имеется относительно небольшой набор свойств, методов и обработчиков событий. Практически все эти свойства являются ни чем иным, как атрибутами формы. Все поддерживающие сценарии версии Navigator и большинство версий Internet Explorer позволяют сценариям изменять эти свойства и управлять ими, что предоставляет разработчикам значительные потенциальные возможности по программированию ответной реакции на действия пользователя на странице, содержащей форму.

Форма, с одной стороны, сама содержится в документе, а с другой - может содержать любое число элементов (называемых элементами управления формы). Все эти интерактивные элементы используются для того, чтобы пользователь мог ввести информацию или выбрать опцию непосредственно в объекте form. Подобный подход отображает организационную структуру дескрипторов HTML, в которой такие элементы, как дескрипторы <INPUT>, размещаются внутри пары дескрипторов <FORM> и </FORM>.

Доступ к свойствам формы

Формы на странице полностью создаются с помощью стандартных дескрипторов HTML. В них можно задать такие важные атрибуты, как NAME, TARGET, ACTION, METHOD и ENCTYPE. Каждый из них является свойством объекта FORM, доступ к которому можно получить, воспользовавшись соответствующим ключевым словом, вводимым только строчными литерами, как показано ниже.

Свойство form.elements[]

Кроме отслеживания поведения различных элементов в пределах формы, браузер также поддерживает список всех элементов управления формы. Этот список является еще одним массивом, в котором элементы располагаются в том порядке, в каком приведены их HTML-дескрипторы в исходном коде. Однако более эффективным является использование ссылок на эти элементы по названиям. С другой стороны, иногда сценарию нужно просмотреть сразу все элементы формы. Это справедливо, если форма изменяется при последующей загрузке, особенно когда число текстовых полей зависит от типа используемого браузера. Например, сценарий может использовать метод document.write() для добавления на страницу дополнительного текстового поля с информацией, используемой только пользователями системы Windows.

Приведенный ниже фрагмент кода демонстрирует принцип использования свойства form.elements[] в цикле повторения for, который просматривает каждый элемент формы и очищает содержимое всех текстовых полей. Сценарий не может просто "пройтись" по форме сверху вниз и задать ее содержимое или значения каждого элемента равным пустой строке, поскольку среди элементов формы могут встречаться, например, кнопки, у которых нет свойства value, которое нужно приравнять к пустой строке.

var form = window.document.forms[0]
for (var i = 0; i<form.elements.length; i++) {
 if (form.elements[i].type == "text") {
  form.elements[i].value = ""}
}

В первом операторе создается переменная под названием form содержащая ссылку на первую форму документа. Это делается на тот случай, если в дальнейшем придется делать ссылки на элементы формы. Ссылки по имени намного компактнее (и выполняются быстрее). Теперь название переменной form можно использовать для задания ссылок на элементы, содержащиеся на форме. Далее проводится просмотр элементов массива elements данной формы. Каждый элемент формы имеет свойство type, которое и определяет тип объекта текущего элемента: текст, кнопка, переключатель, флажок и так далее. В данном случае нам нужно отобрать элементы текстового поля text. Для каждого из таких элементов значение свойства value устанавливается равным пустой строке.

К формам мы вернемся несколько позже. Там будет показано, как создаются сценарии, не использующие кнопку Submit (Отправить), но все же отправляющие данные на сервер, и как происходит проверка данных формы, введенных пользователем.

Элементы формы - это тоже объекты

В объектных моделях документа всех браузеров представлено три типа элементов HTML, используемых в дескрипторах формы <FORM>, которые управляются в сценарии с помощью объектов. Большинство объектов обязаны своим существованием дескрипторам <INPUT> исходного кода страницы. Единственное значение, присвоенное атрибуту TYPE дескриптора <INPUT> определяет, является ли элемент текстовым полем, полем введения пароля, скрытым полем, кнопкой, флажком или переключателем. К другим элементам управления формы относятся <TEXTAREA> и <SELECT>, но они имеют собственные дескрипторы, задающие их в коде.

В то время как элементы управления имеют несколько свойств общего характера (стандартные свойства), некоторые из свойств вводятся для определения специфических характеристик объектов элементов. Например, только объект SELECT имеет свойство, указывающее, какой элемент в списке выбран в текущий момент. Флажки и переключатели имеют свойство, которое определяет, включена или выключена соответствующая опция. Точно так же, все текстовые поля используют одинаковые методы для чтения и изменения их содержимого.

Понимание принципов управления свойствами объектов элементов управления формы - это важный этап в изучении JavaScript. В следующих разделах описаны наиболее важные объекты управления формы и приведены способы их взаимодействия в сценариях.

Текстовые объекты

Каждый из четырех текстовых HTML элементов формы - текстовое поле, поле пароля, скрытое поле и текстовая область - это объект в иерархической структуре модели документа. Все эти элементы, кроме скрытого поля, отображаются на странице, что позволяет пользователю вводить в них необходимые данные. Эти объекты также отображают текстовую информацию, которая может изменяться по мере загрузки и использования страницы (Dynamic HTML в IЕ4+ и NN6+ также предоставляет возможность с помощью сценариев изменять основной текст документа).

Чтобы объектами полей можно было управлять непосредственно из сценария, ничего специального с их HTML-дескрипторами делать не нужно. За исключением, может быть, присвоения значения атрибуту NAME. Всегда неплохо присвоить всем элементам управления формы необычные названия. Это удобно в том случае, если в сценарии устанавливаются свойства или вызываются методы этих элементов. Кроме того, если форма предоставляется программе сервера, которая фактически управляется данными элементов, атрибуту NAME просто необходимо присвоить значение.

Для управления объектами этого типа обработчики событий должны реагировать на многочисленные действия пользователей, такие, как активизация поля (в поле появляется курсор ввода текста) и изменение текста (введение нового значения и выход из поля). Большинство действий над текстовыми полями, так или иначе, связаны с изменением текста (обработчик события onChange). Так как в большинстве случаев посетители Интернета пользуются IE и NN версии 4 и выше, то в них представлены обработчики событий, позволяющие программировать реакцию на нажатие каждой отдельной клавиши или щелчок на кнопке.

Вне всяких сомнений, наиболее часто используемым свойством текстовых элементов является value. Это свойство представляет собой текущее значение текстового элемента. Сценарий может в любой момент вызвать это свойство и установить для него новое значение. Содержимое свойства value - это всегда строка. Может так статься, что эту строку придется преобразовывать в числовой формат, если, например, текстовое поле используется для введения числовых значений или проведения математических операций.

Для того чтобы продемонстрировать способы чтения и записи свойства value текстового поля, в листинге 4 приведено описание HTML-страницы с единственным полем введения данных. Обработчик события onChange в данном примере вызывает функцию upperMe(), которая преобразует текст в верхний регистр (все буквы прописные). В функции upperMe() первый оператор присваивает переменной field ссылку на текстовый объект, что делается исключительно в целях дальнейшего удобства обращения к объекту поля. Многое скрыто и во втором операторе этой функции. То, что находится в правой части оператора присвоения направлено на выполнение ряда ключевых задач. Ссылка на свойство value объекта (field.value) позволяет узнать, что именно в данный момент введено в текстовом поле. Затем эта строка передается одной из функций JavaScript, управляющих строковыми данными. В данном случае это функция toUpperCase(). Она преобразует символы текста в верхний регистр. Вычисленный результат выражения, указанного справа от оператора присвоения, присваивается затем второй переменной upperCaseVersion. При этом в текстовом поле не происходит никаких изменений. Изменения начинаются с третьего оператора, в котором свойству value текстового поля присваивается значение, содержащееся в переменной upperCaseVersion. Необходимости во втором операторе нет, и использован он скорее в целях большей наглядности, поскольку в этом случае весь описанный процесс отчетливо разбивается на отдельные этапы. На практике можно объединить второй и третий оператор в один. Делается это следующим образом:

Листинг 4. Получение и установка свойства value текстового объекта

<HTML>
<HEAD>
<TITLE>Text Object value Property
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function upperMe() {
 var field = document.forms[0].converter
 var upperCaseVersion = field.value.toUpperCase()
 field.value = upperCaseVersion }
</SCRIPT>
</HEAD>
<BODY>
<FORM onSubmit="return false">
<INPUT TYPE="text" NAME="converter" VALUE="sample"
              onChange="upperMe()">
</FORM>
</BODY>
</HTML>

Позже будет показано, как можно еще больше упростить в приведенном выше листинге 4 обращение к таким функциям, как upperMe(). Тем временем, имеет смысл подробнее остановиться на обработчике события onSubmit в дескрипторе формы <FORM>. Далее мы неоднократно будем останавливаться на описании этого обработчика событий. Сейчас же хочется обратить ваше внимание на ту конструкцию, которая используется для предотвращения отправки формы с единственным полем в результате нажатия клавиши Enter.

Объект кнопки

В этом руководстве элемент кнопки INPUT уже неоднократно использовался. Кнопка, сточки зрения использования в сценарии, является одним из наиболее простых объектов. В упрощенной модели объект кнопки имеет ограниченное количество свойств, которые редко используются или изменяются в сценариях "повседневного назначения". Подобно текстовому объекту, за визуальное отображение кнопки отвечает не HTML или сценарии, а операционная система, а также браузер, используемый пользователем при посещении страницы. Безусловно, самым полезным обработчиком событий для кнопки является onClick. Соответствующее событие наступает при щелчке пользователя на кнопке. Все просто. Никаких подвохов.

Объект флажка

Флажок опции - это достаточно простой объект элемента формы <FORM>, однако некоторые из его свойств не всегда правильно трактуются начинающими разработчиками. В отличие от свойства value объекта обычной кнопки (для кнопки это свойство определяет текстовую надпись), в качестве свойства value элемента управления выступает любой текст, описывающий задаваемую опцию. Этот текст не отображается на странице ни в каком виде, однако свойство (первоначально устанавливаемое в атрибуте дескриптора VALUE) весьма важно в сценарии, который хочет "знать" побольше о назначении этого элемента формы.

Ключевое свойство элемента управления флажка определяет, выбран он или нет. Соответствующее свойство checked принимает булево значение: true (истина), если элемент выбран, и false (ложь)- если нет. Как только в сценарии встречается булево свойство, сразу же напрашивается мысль об использовании его в конструкциях типа if или if. . .else. В листинге 5 с помощью значения свойства checked определяется, какое диалоговое окно будет выведено пользователю.

Листинг 5. Свойство checked флажка формы

<HTML>
<HEAD>
<TITLE>Checkbox Inspector
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function inspectBox() {
 if (document.forms[0].checkThis.checked) {
    alert("The box is checked.")
 } else {
    alert("The box is not checked at the moment.")
          }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="checkbox" NAME="checkThis">Check here
<BR>
<INPUT TYPE="button" VALUE="Inspect Box" onClick="inspectBox()">
</FORM>
</BODY>
</HTML>

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

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

Присвоение элементам формы одинаковых названий приводит к тому, что броузер управляет ими иначе, чем остальными элементами управления с разными именами. В этом случае броузер использует для организации элементов с одинаковыми названиями массивы. Имя, присвоенное группе элементов, становится названием массива. Некоторые свойства применимы при этом к группе как к целому. Другие свойства применимы только к отдельным переключателем группы и на них нужно ссылаться с помощью индекса элемента массива. Например, узнать, сколько переключателей находится в группе можно, используя значение свойства length всей группы.

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

В листинге 6 проиллюстрированы некоторые аспекты управления переключателями, включая способы поиска в группе переключателей выставленного в данный момент элемента. В нем также показано, как используется атрибут VALUE и соответствующее свойство для решения поставленных целей.

Страница содержит три переключателя и одну обычную кнопку. Атрибут VALUE каждого переключателя состоит из полного имени. Когда пользователь щелкает на кнопке, обработчик события onClick вызывает функцию fullName(). В этой функции первый оператор создает ссылку на форму. Дальше с помощью цикла for выполняется просмотр всех переключателей группы stooges. Конструкция if используется для проверки свойства checked переключателей. Если переключатель выставлен, то оператор break даст инструкцию выйти из цикла for. При этом значение переменной-счетчика цикла i будет равно тому значению, при котором работа цикла прекращена. В диалоговом окне предупреждения будет использовано свойство value элемента с номером, соответствующим последнему значению переменной i, так что в диалоговом окне будет отображено полное название этого элемента.

Листинг 6. Сценарий управления группой переключателей

<HTML>
<HEAD>
<TITLE>Extracting Highlighted Radio Button
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function fullName() {
var form = document.forms[0]
for (var i = 0; i<form.stooges.length; i++){
if (form.stooges[i].checked) {
break }
}
alert("You chose " + form.stooges[i].value + ".") }
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<B>Select your favorite Stooge: <B>
<INPUT TYPE="radio" NAME="stooges" VALUE="Moe Howard" CHECKED>
Moe
<INPUT TYPE="radio" NAME="stooges" VALUE="Larry Fine" >
Larry
<INPUT TYPE="radio" NAME="stooges" VALUE="Curly Howard" >
Curly
<BR>
<INPUT TYPE="button" NAME="Viewer" VALUE="View Full Name..." onClick="fullName()">
</FORM>
</BODY>
</HTML>

Как вы узнаете из следующих уроков, тенденция использования массивов для управления объектами, имеющими одинаковые названия, может быть весьма полезной при создании сценариев, работающих со столбцами значений форм HTML.

Наиболее трудный элемент формы с точки зрения использования в сценариях - это объект элемента SELECT. Как можно увидеть в иерархической структуре объектов (рис. 1), объект SELECT является объектом достаточно общего характера: он содержит массив объектов OPTION. Более того, в HTML можно использовать этот объект для отображения выпадающего меню или прокручиваемого списка - последний применяется для предоставления пользователю возможности множественного выбора. Ради простоты на данном этапе будем рассматривать применение его в качестве выпадающего меню, позволяющего сделать выбор только одной опции.

Некоторые свойства относятся непосредственно ко всему объекту SELECT, в то время как другие применимы только к отдельным его элементам. Если нужно определить, какую опцию выбрал пользователь, то используйте свойства как объекта SELECT, так и OPTION.

Самое важное свойство всего объекта SELECT - это selectedIndex, доступ к которому задается следующим образом:

Его значение — это индекс выбранного в текущий момент элемента меню или списка. Как это имеет место в большинстве систем нумерации в JavaScript, первый элемент (в списке начиная сверху) имеет нулевой индекс. Значение selectedIndex является исключительно важным параметром для получения доступа к свойствам выбранной опции. В каждой опции чаще всего используются свойства text и value, которые вызываются следующим образом:

document. fom[0].selectName.options[n].text
document.form[0].selectName.options[n].value

Свойство text представляет собой строку, которая отображается в объекте SELECT. Свойство text представляется необычным для объекта формы FORM образом, поскольку в HTML, генерирующем объект SELECT, соответствующий текст определяется вне дескриптора <OPTION>. Внутри дескриптора <OPTION> можно установить только атрибут VALUE, который, подобно переключателям, позволяет связывать его значение в виде скрываемой строки с каждым элементом списка.

Для того чтобы получить значение text или value для выбранной опции, можно использовать свойство selectedlndex объекта SELECT в качестве значения индекса опции. Ссылки в таких случаях достаточно длинные. Поэтому, чтобы понять, как они выполняются, придется немного попрактиковаться. В приведенной ниже функции первый оператор необходим для создания ссылки на объект SELECT. Свойство selectedIndex объекта SELECT заменяет затем значение index массива option того же самого объекта:

function inspect() {
var list = document.forms[0].choices
var chosenItemText = list.options[list.selectedlndex].text
}

Чтобы "вдохнуть жизнь" в объект SELECT, нужно воспользоваться обработчиком события onChange. Как только пользователь выберет новый элемент в списке, сценарий запустит обработчик события, связанный с ним. В листинге 7 приведен пример использования объекта SELECT. Записи элементов списка указывают адреса, по которым проводится перемещение внутри и вне текущего Web-узла. В атрибуте VALUE заданы адреса URL конечных Web-страниц. Когда пользователь выбирает из предложенного списка элемент, обработчик события onChange запускает сценарий, который извлекает свойство value выбранной опции и присваивает его значение объекту location, обеспечивающего переход. Под управлением JavaScript переходы такого типа могут выполняться без использования на странице специальной кнопки Go (Перейти).

Листинг 7. Объект SELECT

<HTML>
<HEAD>
<TITLE>Select Navigation
</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function goThere() {
var list = document.forms[0].urlList
location = list.options[list.selectedIndex].value
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
Куда заглянем?<br>
<SELECT NAME="urlList" onChange="goThere()">
<OPTION SELECTED VALUE="index.html">Главная
<OPTION VALUE="arhcive.html">Архив
<OPTION VALUE="links.html">Полезные ссылки
<OPTION VALUE="http://www.yandex.ru">Поиск в сети
</SELECT>
</FORM>
</BODY>
</HTML>

Об объекте SELECT можно говорить довольно долго. В новых броузерах даже предусмотрена возможность изменения содержимого списков. Однако это уже не для начинающих.

Передача функциям данных форм и элементов

Во всех приведенных примерах, когда обработчик события вызывает функцию, управляющую элементами формы, эти формы или их элементы указываются в функции в явном виде. Однако существуют вполне приемлемые способы передачи информации такого рода от форм или ее элементов управления непосредственно в функции, используя систему сокращений. В этом случае нет необходимости использовать длинные и неудобные ссылки, начинающиеся с уровня объектов окна window или документа document.

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

В конце концов функция определит параметрическую переменную, которая будет возвращать указанную ссылку в качестве значения для переменной, которая сможет в дальнейшем использоваться в функции:

function upperMe(field) {
оператор(ы)
}

Название, которое присваивается переменной-параметру функции, является абсолютно произвольным. Однако часто полезно использовать такие названия, которые бы отображали смысл соответствующей ссылки. Важно, чтобы данная ссылка представляла "живую" связь с объектом. Поэтому с помощью соответствующих операторов в сценарии можно получать и устанавливать значения свойств объекта.

Для других функций может возникнуть потребность получить ссылку на всю форму в целом, а не просто на объект, вызывающий функцию. Это особенно актуально, когда функции нужно иметь доступ к другим элементам той же формы. Для обращения ко всей форме следует сослаться на свойство form объекта INPUT, используя при этом ключевое слово this.

В определении функции должна присутствовать переменная-параметр, которую можно использовать для присвоения ей ссылки на объект. Опять же, название можно выбирать по своему усмотрению. В данном случае предлагается использовать в качестве названия form, тогда легче запомнить, на что указывает соответствующая ссылка.

function inspect(form) {
оператор(ы)
}

В листинге 8 продемонстрирован способ обращения как к отдельному элементу формы, так и к форме вцелом, что делается в два действия. Предполагается, что страница имеет непосредственный доступ к базе данных песен группы Beatles. При щелчке на кнопке Process Data (Передать данные), происходит передача объекта form, который в цикле for вызывается функцией processData() для получения доступа к группе переключателей. Дополнительная ссылка с использованием передаваемого объекта form вызывает свойство value выбранных переключателя и текстового поля.

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

Листинг 8. Передача объекта формы и ее элемента в функцию

<HTML>
<HEAD>
<TITLE>Beatle Picker</TITLE>
<SCRIPT LANGUAGE="JavaSCript">
 function processData(form) {
  for (var i=0; i<form.Beatles.length; i++) {
    if (form.Beatles[i].checked) {
         break }
  }
//Для удобства переменным можно присвоить значения
var beatle = form.Beatles[i].value
var song = form.song.value
alert("Checking whether " + song + " feature " + beatle + "...") }
function verifySong(entry) {
  var song = entry.value
  alert("Checking whether " + " is a Beatles tune...")
}
</SCRIPT>
</HEAD>
<BODY>
<FORM onSubmit="return false"> Choose your favorite Beatle:
<INPUT TYPE="radio" NAME="Beatles" VALUE="John Lennon" CHECKED>John
<INPUT TYPE="radio" NAME="Beatles" VALUE="Paul McCartney">Paul
<INPUT TYPE="radio" NAME="Beatles" VALUE="George Harrison">George
<INPUT TYPE="radio" NAME="Beatles" VALUE="Ringo Starr">Ringo<BR>
Enter the name of your favorite Beatles song;<BR>
<INPUT TYPE="text" NAME="song" VALUE = "Eleanor Rigby"
    onChange="verifySong(this)">
<BR>
<INPUT TYPE="button" NAME="process" VALUE="Process Request..."
     onClick="proce5sData(this.form)">
</FORM>
</BODY>
</HTML>

Теперь вы знаете, как с использованием ключевого слова this можно передавать функциям объекты формы form и ее элементов. Такая методика позволяет не только сократить объем кода, но и повышает надежность выполнения ссылок на нужные объекты.

Если читателю уже доводилось ранее работать с формами на Web-страницах, то ему должно быть известно, насколько просто добавляются кнопки, вроде Submit (Отправить), которые используются для отправки формы серверу. Тем не менее, иногда случается так, что, исходя из эстетических соображений, использование на странице подобного рода системных кнопок не является приемлемым. Вместо этого можно отобразить на странице любое изображение, дескрипторы задания которого должны вызывать сценарий отправки данных формы с помощью оператора javascript:URL (изображения для элементов типа INPUT не поддерживаются в браузерах версий ниже IE4 и NN6).

В сценарии процесс отправки формы реализуется с помощью метода submit(). Все, что нужно сделать, - это указать ссылку на форму и данный метод:

По идее, с помощью этого метода можно так организовать страницу, что при посещении новым пользователем вашего Web-узла сценарий отправлял бы почтовое сообщение владельцу узла. Однако не все так просто. Дело в том, что если в атрибуте ACTION формы использовано выражение mailTo: URL, то JavaScript проигнорирует метод отправки данных формы submit(). Есть свои особенности использования оператора mailTo: URL при управлении формами. Это связано с тем, что браузер не может сам отправить письмо. Ему необходим почтовый клиент. Да и кому понравится, когда без его ведома какой-то сценарий пытается от его имени отправить письмо. Тем более, что при этом адрес Ё-mail станет известен посторонним людям. В условиях всеобщей борьбы со спамом это просто не допустимо. Так что ищите другие способы втихаря отправить себе весточку о посетителе. Не так уж это и сложно.

Перед тем, как форма будет отправлена, полезно выполнить предварительную проверку правильности введенных на ней данных или программных кодов (например, можно изменить в зависимости от предпочтений пользователя свойство формы action). Это можно сделать с помощью функции, которая вызывается обработчиком события формы onSubmit. Сам код программы проверки правильности содержащихся на форме данных в данной главе описываться не будет. Дело это личное. Тем не менее, узнать, как работает обработчик события onSubmit, весьма полезно даже на данном этапе изучения JavaScript.

Во всех, кроме первого, поколениях броузеров, поддерживающих сценарии, начиная с Microsoft (IE3) и Netscape (NN2) существует возможность применения функции проверки правильности данных, которая позволяет отменить отправку формы в тех случаях, если данные неверны или часть из них отсутствует. При таком управлении отправкой данных формы обработчик события onSubmit должен вернуть значение true, иначе процесс считается незавершенным. Если возвращается значение false, то отправка формы отменяется. Все это кажется вначале несколько мудреным, поскольку в каждом конкретном случае требуется больше, чем просто с помощью обработчика события вызвать функцию, которая возвращает значение true или false. Возвращается значение с помощью ключевого слова return.

В листинге 9 приведен пример программы проверки корректности данных, которая перед тем как разрешить отправку формы, просматривает все поля и проверяет наличие в них информации. У формы в этом примере атрибута ACTION нет вообще, поэтому она в любом случае на сервер отправляться не будет. Обратите особое внимание на то, как в обработчике события onSubmit (который в данном случае задает ссылку на объект FORM в виде параметра- ключевое слово this указывает на объект FORM, поскольку его дескрипторы содержат обработчик события) используется ключевое слово return перед названием функции. Если функция возвращает в качестве своего результата значение true или false, обработчик события преобразует это в return true или return false соответственно.

Листинг 9. Последняя проверка данных перед отправкой формы

<HTML>
<HEAD>
<TITLE>Validator</TITLE>
<SCRIPT LANGUAGE""JavaScript">
  function checkedForm(form){
   for (var i=0; i<form.elements.length; i++) {
     if (form.elements[i].value == "") {
       alert ("Fill out ALL fields.")
       return false
     }
  }
return true
}
</SCRIPT>
</HEAD>
<BODY>
<FORM onSubmit=return checkForm(this)">
Please enter all requested information:
<BR>
First Name: <INPUT TYPE="text" NAME="firstName">
<BR>
Last Name: <INPUT TYPE="text" NAME="lastName">
<BR>
Rank: <INPUT TYPE="rank">
<BR>
Serial Number: <INPUT TYPE="text" NAME="serialNuinber">
<BR>
<INPUT TYPE="submit">
</FORM>
</BODY>
</HTML>

Еще одна особенность в поведении обработчика события onSubmit, казалось бы вызывающего метод submit(), требует дополнительных пояснений. У вас могло сложиться впечатление (и с логической точки зрения оно было бы вполне обосновано), что метод submit() должен вызываться в сценарии после того, как пользователь щелкнет на кнопке Submit. Однако это не так. В Navigator использование метода submit() вообще не связано с обработчиком события onSubmit. Если нужно выполнить проверку корректности данных предоставляемой формы посредством метода submit(), то нужно вызвать функцию проверки формы, которая непосредственно вызовет метод submit().