3.3.Обработка данных форм на JavaScript
Вопросы разработки серверных сценариев выходят за рамки данной лабораторной работы, однако введенные пользователем в форму данные можно обрабатывать на стороне клиента при помощи сценариев JavaScript.
JavaScript – объектно-ориентированный скриптовый язык программирования. Программа на JavaScript никогда не компилируется, а выполняется при помощи интерпретатора, который встроен в любой веб-браузер.
Помимо собственно программирования JavaScript предоставляет широчайшие возможности для манипуляций с веб-страницей. При помощи него можно получить доступ к свойствам всех элементов HTML-документа и модифицировать их.
Для того чтобы вводимую пользователем в поля формы информацию можно было обработать в сценарии, необходимо заменить в форме элемент <input type=”submit”> на элемент <input type=”button” onclick=”…”>. В качестве значения свойства onclick необходимо указать имя JavaScript-функции обработки события. В качестве параметра функции передается объект-форма.
В теле функции осуществляется проверка на непустое значение в поле username, которое затем выводится внизу страницы путем присвоения его значения свойству innerHTML предварительно созданного элемента <div> с id=”result”.
Ниже приведен пример страницы, включающей сценарий JavaScript.
<html>
<head>
<title>Пример обработки полей формы на JavaScript</title>
<script language="JavaScript">
<!-- Скрыть
function test(form) {
if (form.username.value == "")
alert("Пожалуйста, введите имя!")
else {
alert("Hi "+form.username.value+"! Форма заполнена корректно!");
document.getElementById("result1").innerHTML = "<p>Спасибо, "+form.username.value+"!</p>"
if (form.confirm.checked) document.getElementById("result2").innerHTML = "<p>Согласие c правилами регистрации Вами подтверждено!</p>";
if (form.login.value != "") document.getElementById("result3").innerHTML = "<p>Ваш логин: "+form.login.value+"</p>";
if (form.pass.value != "") document.getElementById("result4").innerHTML = "<p>Ваш пароль: "+form.pass.value+"</p>";
//Обработка радиокнопок
if (form.status[0].checked) document.getElementById("result5").innerHTML = "<p>Ваш род занятий: студент</p>";
if (form.status[1].checked) document.getElementById("result5").innerHTML = "<p>Ваш род занятий: шклольник</p>";
if (form.status[2].checked) document.getElementById("result5").innerHTML = "<p>Ваш род занятий: служащий</p>";
if (form.status[3].checked) document.getElementById("result5").innerHTML = "<p>Ваш род занятий: рабочий</p>";
if (form.status[4].checked) document.getElementById("result5").innerHTML = "<p>Ваш род занятий: пенсионер</p>";
switch (form.region.value) {
case "0": document.getElementById("result6").innerHTML = "<p>Ваш регион: Москва</p>"; break;
case "1": document.getElementById("result6").innerHTML = "<p>Ваш регион: Югра</p>"; break;
case "2": document.getElementById("result6").innerHTML = "<p>Ваш регион: Тюменская область</p>"; break;
case "3": document.getElementById("result6").innerHTML = "<p>Ваш регион: неизвестен</p>"; break;
}
if (form.about_you.value != "") document.getElementById("result7").innerHTML = "<p>Вы оставили о себе следующую информацию: "+form.about_you.value+"</p>";
}
}
// -->
</script>
</head>
<body>
<b>Заполните поля для регистрации:</b>
<form name="registration" method="get" action="http://mysite.faraway.com">
ФИО:<br>
<input name="username" type="text" size="20" maxlength="40"><br>
Логин:<br>
<input name="login" type="text" size="20" maxlength="40"><br>
Пароль:<br>
<input name="pass" type="password" size="20" maxlength="40"><br>
Род занятий:<br>
<input type="radio" name="status" value="student" checked>Студент<br>
<input type="radio" name="status" value="pupil">Школьник<br>
<input type="radio" name="status" value="employee">Служащий<br>
<input type="radio" name="status" value="worker">Рабочий<br>
<input type="radio" name="status" value="pensioner">Пенсионер<br>
Регион:<br>
<select name="region" size="1">
<option value="0">Москва
<option value="1" selected>Югра
<option value="2">Тюменская область
<option value="3">Другой регион
</select><br>
Несколько слов о себе:<br>
<textarea name="about_you" rows="5" cols="30"></textarea><br>
Я согласен с правилами регистрации:<input type="checkbox" name="confirm"><br>
<input type="button" value="Зарегистрироваться" onclick="test(this.form)">
</form>
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<div id="result4"></div>
<div id="result5"></div>
<div id="result6"></div>
<div id="result7"></div>
</body>
</html>
