Проверка анкеты

Методику работы с текстовыми полями в сценариях JavaScript мы рассмотрим на примере документа HTML с формой для ввода анкеты, показанной на рис. 3.9.

Рис. 3.9. Форма для ввода анкеты
Наш сценарий выполняет несложную обработку информации, которая вводится в текстовых полях этой формы. В частности, сценарий преобразует символы фамилии в прописные. Если указать возраст, меньший 18 лет, сценарий сделает его равным нулю.
Если после заполнения анкеты нажать кнопку Complete, на экране появится диалоговая панель, отображающая содержимое отдельных полей формы (рис. 3.10).

Рис. 3.10. Отображение содержимого полей анкеты
Кнопка Reset устанавливает поля в исходное состояние.
Исходный текст документа HTML с описанной выше формой и сценарием JavaScript вы найдете в листинге 3.4.
Листинг 3.4. Файл chapter3/text/text.php

Работа с текстовыми полями

Заполните анкету

Фамилия:

Имя:

Телефон:

Возраст:

Для того чтобы преобразовать символы фамилии в прописные, для поля family мы определили обработчик события onChange:
onChange="this.value=this.value.toUpperCase()"
После внесения изменений в содержимое поля этот обработчик вызывает метод toUpperCase, определенный в классе строк. Преобразованное значение записывается снова в свойство this.value.
Поле Age имеет два обработчика для событий onChange и onFocus:
onChange="this.value=CheckAge(this.value)"
onFocus="this.select()"
Первый из этих обработчиков вызывает функцию проверки возраста CheckAge, передавая ей значение из поля Age. Возвращенное этой функцией значение снова записывается в то же самое поле.
Функция CheckAge выглядит очень просто:
function CheckAge(age)
{
if(age < 18)
return "0";
else
return age;
}
Если ей передается строка, содержащая число, меньшее 18, она возвращает нулевое значение. В том случае, когда число больше 18 или когда в этом поле находится нечисловое значение, функция CheckAge возвращает переданную ей строку без изменений.
Обработчик события onFocus вызывает метод select, выделяющий содержимое поля редактирования. Действие этого обработчика вы можете увидеть, нажимая клавишу табуляции до тех пор, пока фокус ввода не будет передан полю Age.
Кнопку Complete пользователь нажимает после заполнения анкеты. Для нее мы определили обработчик события onClick:

Этот обработчик вызывает функцию с именем Complete, в задачу которой входит отображение содержимого полей формы. Исходный текст функции Complete мы привели ниже:
function Complete()
{
var szElement="";
szElement="Фамилия: " + Sel.family.value +
"\nИмя: " + Sel.Name.value +
"\nТелефон: " + Sel.PhoneNumber.value +
"\nВозраст: " + Sel.Age.value;

alert(szElement);
}
Обратите внимание на то, как мы адресуемся к свойствам полей формы, указывая имя формы, имена полей и имя свойства value.