Проверка анкеты
Методику работы с текстовыми полями в сценариях JavaScript мы рассмотрим на примере документа HTML с формой для ввода анкеты, показанной на рис. 3.9.
Рис. 3.9. Форма для ввода анкеты
Наш сценарий выполняет несложную обработку информации, которая вводится в текстовых полях этой формы. В частности, сценарий преобразует символы фамилии в прописные. Если указать возраст, меньший 18 лет, сценарий сделает его равным нулю.
Если после заполнения анкеты нажать кнопку Complete, на экране появится диалоговая панель, отображающая содержимое отдельных полей формы (рис. 3.10).
Рис. 3.10. Отображение содержимого полей анкеты
Кнопка Reset устанавливает поля в исходное состояние.
Исходный текст документа HTML с описанной выше формой и сценарием JavaScript вы найдете в листинге 3.4.
Листинг 3.4. Файл chapter3/text/text.html
<HTML>
<HEAD>
<TITLE>Работа с текстовыми полями</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function Complete()
{
var szElement="";
szElement="Фамилия: " + Sel.family.value +
"\nИмя: " + Sel.Name.value +
"\nТелефон: " + Sel.PhoneNumber.value +
"\nВозраст: " + Sel.Age.value;
alert(szElement);
}
function CheckAge(age)
{
if(age < 18)
return "0";
else
return age;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR=white>
<H1>Заполните анкету</H1>
<FORM NAME="Sel">
<TABLE>
<TR><TD><B>Фамилия:</B></TD><TD><INPUT TYPE="text"
NAME="family"
onChange="this.value=this.value.toUpperCase()"
SIZE="20" ></TD></TR>
<TR><TD><B>Имя:</B></TD><TD><INPUT TYPE="text"
NAME="Name" SIZE="20"></TD></TR>
<TR><TD><B>Телефон:</B></TD><TD><INPUT TYPE="text"
NAME="PhoneNumber" SIZE="10"></TD></TR>
<TR><TD><B>Возраст:</B></TD><TD><INPUT TYPE="text"
NAME="Age" VALUE="18" SIZE="4"
onChange="this.value=CheckAge(this.value)"
onFocus="this.select()"
></TD></TR>
<P>
<TABLE>
<TR><TD><INPUT TYPE="button" VALUE="Complete"
onClick="Complete();"></TD>
<TD><INPUT TYPE="reset" VALUE="Reset"></TD></TR>
</TABLE>
</FORM>
</BODY>
</HTML>
Для того чтобы преобразовать символы фамилии в прописные, для поля 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:
<INPUT TYPE="button" VALUE="Complete"
onClick="Complete();">
Этот обработчик вызывает функцию с именем 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.
