10. JavaScript и Forms.

     Структуры form при программировании на языке JavaScript приобретают особое значение.
Основное назначение form в страничках HTML - это подготовка информации для обработки на серверах, используя механизм CGI (common gateway interface). При применении form в JavaScript пользователю предоставляется возможность обработки информации непосредственно на клиент машинах самим интерпретатором (браузером) без сетевых обменов. Даже применяя программы CGI для сложной обработки введенной информации можно использовать программы на JavaScript, в частности, для проверки значимости (допустимости) ввода.

10.1. Создание Form.

     Главное отличие прямого создания form средствами HTML и расширенными средствами JavaScript заключается в включении обработчиков событий в структуру form. Они вызываются при выполнении различного рода манипуляций с элементами form . Внутри тегов <FORM> включаемые "on..." обработчики событий невидимы устаревшими браузерами, которые JavaScript не поддерживают. Заметим также, что в JavaScript структуры типа form, рассматриваются как объекты.
     Типичными объектами типа form, которые используются в JavaScript, являются:

     - text поля - для ввода строк текста,
     - button - для выбора действия,
     - radio кнопки - для селективного выбора из группы параметров,
     - check блоки - для селективного выбора либо отказа независимых параметров.

    В отличие от HTML в JavaScript существенным является использование имен (параметов name) как самой form, так и всех ее элементов (объектов). Имена позволяют непосредственно обращаться к объектам form в JavaScript программе.
     Типичным примером применения form является следующая скрипт-программа:

<FORM NAME="myform" ACTION="" METHOD="GET">
Enter something in the box:<BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
</FORM>

   - FORM NAME="myform" задает имя form. Повсюду в программе JavaScript можно обращаться к данной form по имени myform.
   - ACTION="" задает браузеру как выполнять операцию submit для передачи информации CGI программам на сервере. В данной form эта процедура не указана. Обычно здесь задается URL для CGI программы.
   - METHOD="GET" задает способ передачи данных серверу при операции submit. В приведенной form нет подобной операции и данный параметр приведен для примера.
   - INPUT TYPE="text" - стандартное для HTML задание поля для ввода строки текста.
   - INPUT TYPE="button" - стандартное для HTML задание объекта типа "кнопка".
   - onClick="testResults(this.form)" - задание обработчика событий, который будет вызван при нажатии кнопки мыши на данном объекте. Обработка события заключается в вызове функции testResults() с передачей в качестве параметра объекта, которым будет являться текущая form.

10.2. Получение значений из form объектов.

     Ниже приведена скрипт-программа создания и обработки form объекта. После ввода строки текста в поле ввода с именем "inputbox" и нажатии кнопки мыши в поле с именем "button" будет вызвана программа обработчика событий - функция testResults().

<HTML>
<HEAD>
<TITLE>Test Input </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResult(form){
var TestVar = form.inputbox.value;
alert ("You typed: " + TestVar);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">
Enter something in the box:<BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button" Value="Click" onClick="testResults(this.form)">
</FORM>
</BODY>
</HTML>

     Функция testResults (form) выполняет простую операцию - копирует содержимое поля ввода в переменную TestVar:

        var TestVar = form.inputbox.value

     Заметим, что это содержимое поля ввода является свойством типа value объекта с именем inputbox, входящего в объект типа form.

     Строго говоря, необязательно было передавать объект form функции в качестве параметра. Поскольку этот объект имеет имя myform, его можно рассматривать в явном виде как элемент объекта document. И тогда оператор присваивания мог выглядеть следующим образом:

        var TestVar = document.myform.inputbox.value;

10.3. Установка значений в form объектах.

     Поля ввода (свойства типа value), подобных в вышеприведенном примере полю inputbox, одновременно предназначены и для чтения, и для записи информации. Операция записи и является прцедурой установки значения.

     Пример:

<HTML>
<HEAD>
<TITLE>Test Input </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function readText (form) {
TestVar =form.inputbox.value;
alert ("You typed: " + TestVar);
}
function writeText (form) {
form.inputbox.value = "Have a nice day!"
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">
Enter something in the box:<BR>
<INPUT TYPE="text" NAME="inputbox" VALUE=""><P>
<INPUT TYPE="button" NAME="button1" Value="Read"
onClick="readText(this.form)">
<INPUT TYPE="button" NAME="button2" Value="Write"
onClick="writeText(this.form)">
</FORM>
</BODY>
</HTML>

Действия программы:

    - при нажатии кнопки "Read" JavaScript вызывает функцию readText(), которая читает и высвечивает введенную в поле ввода текстовую строку,
    - при нажатии кнопки "Write" JavaScript вызывает функцию writeText(), которая записывает строку "Have a nice day!" в это же поле "inputbox".

10.4. Чтение другого типа значений в объектах form.

     Поле ввода типа text является одним из наиболее употребимым объектом для чтения и записи информации. Тем не менее, применяются операции чтения-записи значений и для других объектов в form:

    - Hidden поле (TYPE="hidden"),
    - Radio кнопки (TYPE="radio"),
    - Check поле (TYPE="checkbox"),
    - Text area поле (<TEXT AREA>),
    - Списки меню (<SELECT>).

Hidden поля.

     С точки зрения JavaScript поля hidden являются такими же полями ввода, как и поля типа text, с теми же свойствами и методами. Однако, с точки зрения пользователя - они не существуют, поскольку не появляются на экране. Применяются эти поля главным образом при передачах данных в клиент-сервер операциях либо для хранения промежуточных (временных) данных.

Radio кнопки.

     Radio кнопки используются для выбора единственного пункта из группы предложенных действий. И поэтому применение одного поля типа radio кнопки не имеет никакого смысла. Задаются radio кнопки как отдельные объекты, но с одним групповым именем. При этом JavaScript создает массив кнопок, к которому можно обращаться по индексу. Первая определенная кнопка имеет индекс 0, вторая - 1 и т.д. Заметим, что атрибут VALUE этих полей для JavaScript не имеет существенного значения. Используется он, главным образом, при операциях submit для серверных CGI программ.

Примеры:

<INPUT TYPE="radio" NAME="rad" VALUE="radio_button1" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button2" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button3" onClick=0>
<INPUT TYPE="radio" NAME="rad" VALUE="radio_button4" onClick=0>

     Выше был приведен пример задания выключенных обработчиков событий.

     В следующем примере выполняется проверка выбранной radio кнопки:

<HTML>
<HEAD>
<TITLE>Radio Button Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testButton (form){
for (Count = 0; Count < 3; Count++) {
if (form.rad[Count].checked)
break;
}
alert ("Button " + Count + " is selected");
}
</SCRIPT>
</BODY>
<FORM NAME="testform">
<INPUT TYPE="button" NAME="button" Value="Click"
onClick="testButton(this.form)"><BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button1" onClick=0><BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button2" onClick=0><BR>
<INPUT TYPE="radio" NAME="rad" Value="rad_button3" onClick=0><BR>
</FORM>
</HTML>

     Функция testButton() выполняет процедуру обработки события, возникшего при нажатии кнопки типа "button" для анализа отметки включения radio кнопки. Внутри цикла по всем кнопкам группы "rad" проверяется факт включения каждой кнопки. При обнаружении включенной кнопки цикл прекращается и выдается сообщение о номере кнопки (начиная с 0) функцией alert().

         Если в скрипт-программе используется несколько групп типа radio, к кнопкам каждой
         группы надо обращаться по групповым именам. Так например, первая группа кнопок
         может иметь имя "rad1", вторая - "rad2."

Установка значений.

     Установить включение кнопки достаточно просто, необходимо задать параметор CHECKED при инициализации объекта средствами HTML. Например:

<INPUT TYPE="radio" NAME="rad" Value="rad_button1" CHECKED onClick=0><BR>

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

form.rad[0].checked = true; // sets to first button in the rad group

Check поля.

     Check поля, в отличие от radio кнопок могут употребляться в одиночном режиме. В JavaScript программе можно проверить отмечено ли поле, установить либо удалить отметку.

Пример:

<HTML>
<HEAD>
<TITLE>Checkbox Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testButton (form){
alert (form.check1.checked);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="testform">
<INPUT TYPE="button" NAME="button" Value="Click"
     onClick="testButton(this.form)"><BR>
<INPUT TYPE="checkbox" NAME="check1" Value="Check1">Checkbox 1<BR>
<INPUT TYPE="checkbox" NAME="check2" Value="Check2">Checkbox 2<BR>
<INPUT TYPE="checkbox" NAME="check3" Value="Check3">Checkbox 3<BR>
</FORM>
</BODY>
</HTML>

     Подобно radio кнопкам атрибут CHECKED устанавливается для поля check стандартным для HTML способом:

<INPUT TYPE="checkbox" NAME="check1" Value="0" CHECKED>Checkbox 1<BR>

     Программным способом установить отметку поля check можно задавая значение true свойству checked объекта. При этом указывается имя этого поля:

         form.check1.checked = true

     Напомним, что можно выполнять программным путем проверку отметки полей check при множественном их задании.

Text Area поля.

     Поля типа text area применяются для ввода некоторого числа текстовых строк. Параметрами являются:

     ROWS - для задания числа строк,
     COLS - для задания числа столбцов (символов в строке).

     По умолчанию задается поле в 1 строку длиной в 20 символов.

     Пример:

<TEXTAREA NAME="myarea" COLS="40" ROWS="7">

</TEXTAREA>

     В JavaScript программе можно прочитать содержимое поля ввода text area. Это делается используя значение свойства value объекта.

     Пример:

<HTML>
<HEAD>
<TITLE>Text Area Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function seeTextArea (form) {
alert (form.myarea.value);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
<INPUT TYPE="button" NAME="button3" Value="Test"
     onClick="seeTextArea(this.form)">
<TEXTAREA NAME="myarea" COLS="40" ROWS="5">
</TEXTAREA>
</FORM>
</BODY>
</HTML>

     Можно задать предварительный текст в поле text area двумя способами:
    - средствами HTML заключить текст в тегах <TEXTAREA> and </TEXTAREA>. Эта схема полезна при выполнении процедуры RESET восстановления полей.
    - программным способом.

Первый способ:

<TEXTAREA NAME="myarea" COLS="40" ROWS="7">
Initial text displayed here
</TEXTAREA>

Второй способ:

formname.textarea.value = "Text goes here",
   где:

    - formname - имя form,
    - textarea - имя поля textarea,
    - "Text goes here" - предварительный текст для высвечивания.

Selection.

     Блок меню типа Selection позволяет выбирать пункт меню из множественного списка. Поле списка создается тегами <SELECT> заголовка списка и <OPTION> для отдельного элемента списка.

Пример списка с одним окном:

<SELECT NAME="list">
<OPTION>This is item 1
<OPTION>This is item 2
<OPTION>This is item 3
<OPTION>This is item 4
</SELECT>

Пример списка с окном для 4 пунктов:

<SELECT NAME="list" SIZE="4">
<OPTION>This is item 1
<OPTION>This is item 2
<OPTION>This is item 3
<OPTION>This is item 4
</SELECT>

     Для определения номера выбранного пункта используется свойство selectedIndex данного объекта. Выбранный пункт принимает значения индекса массива: 0 - соответствует первому пункту списка меню, 1 - второму и т.д. Если не выбран ни один пункт списка, возвращаемым значением будет -1.

    Пример:

<HTML>
<HEAD>
<TITLE>List Box Test</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testSelect(form) {
alert (form.list.selectedIndex);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform" ACTION="" METHOD="GET">
<INPUT TYPE="button" NAME="button" Value="Test"
onClick="testSelect(this.form)">
<SELECT NAME="list" SIZE="3">
<OPTION>This is item 1
<OPTION>This is item 2
<OPTION>This is item 3
</SELECT>
</FORM>
</BODY>
</HTML>

     Если есть необходимость получения текста меню выбранного пункта, надо использовать
функцию testSelect():

function testSelect (form) {
Item = form.list.selectedIndex;
Result = form.list.options[Item].text;
alert (Result);
}

10.5. Некоторые дополнительные возможности <SELECT> объектов.

     Применение объектов типа <SELECT> доставляет немало трудностей для многих JavaScript программистов. Ниже приведены примеры в качестве рекомендации при работе со списком меню, созданным <SELECT> объектом,
где:
     formname - уникальное имя объекта form,
     selectname - имя тестируемого объекта типа select,
     index - выбранный пункт меню (порядковый номер, начиная с 0).

     a. определить значимость выбранного пункта меню.(Если указанный пункт меню отсутствует, возвращаемым результатом будет null.)

        result = formname.selectname.options[index];

     b. отметить выбранный пункт:

        formname.selectname.selectedIndex = index;

     c. чтение текста выбранного пункта меню:

        Item = formname.selectname.selectedIndex;
        Result = formname.selectname.options[Item].text;

     d. определить число пунктов в списке меню:

        Result = formname.selectname.length;

     e. задать текст для выбранного пункта меню и перезагрузить страницу:

        formname.selectname.options[index].text = "Text";
        history.go(0);

        "Text" - новый текст пункта меню.

10.6. Некоторые события в Form.

     В вышеприведенных примерах использовался onClick обработчик событий, как наиболее популярный для form структур. Тем не менее, при обработке элементов form используются и другие типы обработчиков событий:

   - onFocus - при фокусировке поля ввода,

   - onBlur - при снятии фокусировки с поля ввода,
   - onChange - при выборе нового пункта в поле меню select объекта, либо при потере фокуса в полях ввода типа text или text area (и при наличии введенных данных),
   - onSelect - при выборе текста в полях text и text area,
   - onSubmit - при выборе процедуры submit для передачи данных.

Замечание: В Netscape 2.0 обработка события типа onChange и onSelect выполняется некорректно.

10.7. Проверка значимости Form полей в JavaScript.

     Как уже выше отмечалось, использование структур form средствами HTML предназначалось для ввода данных и передачи их для обработки на серверные компьютеры CGI программами. Использование JavaScript программ для этой же цели может заключаться, в частности, в проверке вводимой информации в интерактивном режиме на клиент-компьютере до отправки ее на сервера. При этом, с серверных CGI программ может быть снята проблема проверки корректности обраба-тываемой информации.

10.7.1. Программы проверки ввода.

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

<HTML>
<HEAD>
<TITLE>Test Input Validation</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function testResults (form) {
TestVar = isNumberString (form.inputbox.value)
if (TestVar == 1)
        alert ("Congratulations! You entered only numbers");
else
        alert ("Boo! You entered a string with non-numbers characters");
}
function isNumberString (InString) {
if(InString.length==0) return (false);
var RefString="1234567890";
for (Count=0; Count < InString.length; Count++) {
        TempChar= InString.substring (Count, Count+1);
        if (RefString.indexOf (TempChar, 0)==-1)
        return (false);
}
return (true);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="myform">
Enter a string with numbers only:
<INPUT TYPE="text" NAME="inputbox" VALUE="">
<INPUT TYPE="button" NAME="button" Value="Click"
onClick="testResults(this.form)">
</FORM>
</BODY>
</HTML>

     Заметим, что используемая в примере функция isNumberString(), кроме проверки символов, выполняет проверку на наличие введенных данных. Если не делать такой проверки, "пустой" ввод может рассматриваться как допустимое значение.

Обзор программ проверки значимости.

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

Программы                  Что они делают

IsAlphabeticChar         Проверяет, является ли символ чисто алфавитным
IsAlphabeticString       Проверяет, является ли строка чисто алфавитной
IsNumberChar             Проверяет, является ли символ цифрой
IsNumberString           Проверяет, является ли строка чисто цифровой
IsCharUpper                Проверяет, содержит ли строка одни прописные символы
IsCharLower                Проверяет, содержит ли строка одни строчные символы
IsPunc                           Проверяет, является ли символ пунктуацией
IsWithinRange             Проверяет значение числа из указанного диапазона
IsBlank                          Проверяет пустой ли ввод

 

10.7.2. Практические примеры проверки ввода.

     Ниже будет приведен пример с демонстрацией прменения JavaScript операторов для проверки корректности введенных данных в полях ввода form.

     Установлены 4 поля ввода с соответствющими кнопками для запуска программы обработки ввода. Надо ввести предписуемый текст и нажать кнопку ввода. Если программа обнаружит несоответствие введенных данных требуемому формату, будет выдано сообщение для повторения ввода.

   Требование к вводу:

   - в первом поле надо ввести e-mail адрес в установленном синтаксисе,
   - во втором поле надо ввести точно пять символов,
   - в третьем поле надо ввести три или более символов,
   - в четвертом поле сделать любой (не пустой) ввод.

<HTML>
<HEAD>
<TITLE> Verifying Form Input with JavaScript</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function runTest(form, button) {
Ret = false;
if (button.name == "1") Ret = testBox1(form);
if (button.name == "2") Ret = testBox2(form);
if (button.name == "3") Ret = testBox3(form);
if (button.name == "4") Ret = testBox4(form);
if (Ret)
alert ("Successful input!");
}
function testBox1(form) {
Ctrl = form.inputbox1;
if (Ctrl.value == "" || Ctrl.value.indexOf ('@', 0) == -1) {
       validatePrompt (Ctrl, "Enter a valid email address")
       return (false);
} else
       return (true);
}
function testBox2(form) {
Ctrl = form.inputbox2;
if (Ctrl.value.length != 5) {
       validatePrompt (Ctrl, "Provide five characters")
       return (false);
} else
       return (true);
}
function testBox3(form) {
Ctrl = form.inputbox3;
if (Ctrl.value.length < 3) {
       validatePrompt (Ctrl, "Provide at least three characters")
       return (false);
} else
       return (true);
}
function testBox4(form) {
Ctrl = form.inputbox4;
if (Ctrl.value == "") {
       validatePrompt (Ctrl, "Provide a value for this box")
       return (false);
} else
       return (true);
}
function runSubmit (form, button) {
if (!testBox1(form)) return;
if (!testBox2(form)) return;
if (!testBox3(form)) return;
if (!testBox4(form)) return;
alert ("All entries verified OK!");
//document.test.submit(); // un-comment to actually submit form
return;
}
function validatePrompt (Ctrl, PromptStr) {
alert (PromptStr)
Ctrl.focus();
return;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="test" ACTION="http://domain.com/cgi-bin/val.cgi" METHOD=GET>
Enter an e-mail address (e.g. tj@myserver.com): <BR>
<INPUT TYPE="text" NAME="inputbox1">
<INPUT TYPE="button" NAME="1" VALUE="Test Input"
       onClick="runTest(this.form, this)"><P>
Enter five characters only: <BR>
<INPUT TYPE="text" NAME="inputbox2">
<INPUT TYPE="button" NAME="2" VALUE="Test Input"
       onClick="runTest(this.form, this)"><P>
Enter three or more characters: <BR>
<INPUT TYPE="text" NAME="inputbox3">
<INPUT TYPE="button" NAME="3" VALUE="Test Input"
       onClick="runTest(this.form, this)"><P>
Enter anything (don't leave blank): <BR>
<INPUT TYPE="text" NAME="inputbox4">
<INPUT TYPE="button" NAME="4" VALUE="Test Input"
       onClick="runTest(this.form, this)"><P><P>
<INPUT TYPE="button" NAME="Submit" VALUE="Submit"
       onClick="runSubmit(this.form, this)"><P>
</FORM>
</BODY>
</HTML>

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

     Метод focus() используется для актуализации повторного ввода с поля типа text box при ошибочном вводе данных. На некоторых платформах (например, Windows) метод focus() не всегда реализуется в виде мерцающей черточки в поле ввода.

Проверка полей Textarea.

     Подобно полю ввода типа text, нужно использовать свойство value для чтения и проверки содержимого поля text area.

    Пример:

Ret = document.myform.control.value; // assigns content to Ret
Ret = document.myform.control.value.length; // assigns length of content to Ret
Ret = document.myform.control.value.indexOf ("\n") // value 0 or above indicates hard return

Проверка Check box полей.

     Поле типа check box имеет два состояния: on или off (включено/выключено). В чтении такого состояния и заключается проверка данного поля.
    Пример:

Ret = document.myform.control.checked; // true if checked; false if not checked

Проверка Radio кнопок.

     За один раз можно проверить включение одной radio кнопки из всей группы. Для этого формируется цикл по числу кнопок в группе и поочередно проверяется выбор одной из кнопок.

for (Count = 0; Count < 3; Count++) {
if (form.rad[Count].checked)
       break;
}

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

Selected = false;
for (Count = 0; Count < 3; Count++) {
       if (form.rad[Count].checked) {
           Selected = true;
           break;
           }
}
if (Selected)
       // a radio button is selected
else
       // no radio button is selected

Проверка Selection меню.

     В следующем примере в цикле проверяется произведен ли хоть один выбор пункта меню:

Selected = false;
for (Count = 0; Count < document.myform.control.length; Count++) {
       if (form.control[Count].selected)
           Selected = true;
       }
if (Selected)
       // an option is selected
else
       // no option is selected

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

Selected = 0;
for (Count = 0; Count < document.myform.control.length; Count++) {
       if (form.control[Count].selected)
           Selected++;
       }
if (Selected < 3)
       // fewer than 3 selected
else
       // 3 or more selected

     Можно использовать противоположную логику для проверки, что произведен выбор не более, чем требовалось:

Selected = 0;
for (Count = 0; Count < document.myform.control.length; Count++) {
       if (form.control[Count].selected)
           Selected++;
       }
if (Selected > 3)
       // more than three selected
else
       // 3 or less selected
BACK.gifВернуться к оглавлению