Обработка данных форм на 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>

<!-- Скрыть

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>

ФИО:<br>

Логин:<br>

Пароль:<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>

<option value="0">Москва

<option value="1" selected>Югра

<option value="2">Тюменская область

<option value="3">Другой регион

</select><br>

Несколько слов о себе:<br>

Я согласен с правилами регистрации:<input type="checkbox" name="confirm"><br>

</form>

</body>

</html>