Проверка данных перед отправкой на сервер
Для уменьшения нагрузки на сеть и веб-сервер можно проверять введённые данные на браузере с помощью сценария на JavaScript. Если в данных обнаружится ошибка, то пользователю предоставляется возможность её исправить. Введенные правильно данные отправляются на веб-сервер. Использование сценария для управления формой демонстрируется в примере 3.1.
Пример 3.1
<HTML>
<HEAD><TITLE>Первая страница</title></head>
<H2>Представьтесь, пожалуйста</h2>
<FORM name=F1 METHOD="POST" ACTION="">
Имя....
<INPUT TYPE="text" NAME="name"><BR>
Возраст <INPUT TYPE="text" NAME="age">
<P> <INPUT TYPE="submit" VALUE="ВВОД" onclick="Proverka()">
</FORM>
<SCRIPT>
function Proverka()
{ im=document.F1.name.value
vozr=document.forms[0].elements[1].value st=""
if(im == "") st="имя\n"
if(vozr == "") st+="возраст"
if(st == "") document.F1.action="Privet.php"
else //отмена передачи на веб-сервер
{ str="Введите:\n "+st
alert(str)
return=false
}
}
</script>
</html>
<HTML>
<HEAD><TITLE>Вторая страница</title></head>
<BODY>
<H3>П Р И В Е Т С Т В И Е</h3>
<?php
$imja=$_POST["name"]; //приём параметров из формы
$age=$_POST["age"]; $x="Здравствуйте!
$imja.";
if($age>50) echo "$x Вы включены в старшую группу.";
elseif($age>30)echo "$x Вы включеныв группу среднего возраста.";
else echo"$x Вы относитесь к молодёжной группе.";
?>
<P>
<A href="Form_Post.html">Возврат </a>
</body>
</html>
Выполнить пример 3.1 Пример выполняется через веб-сервер по протоколу HTTP. Адрес (URL) примера: http://kam.ru/LabJS/prim3_1.html
Пример 3.1 состоит из двух страниц.Первая страница служит для ввода пользователем данных и их проверки с помощью скрипта, написанного на JavaScript. Если данные введены правильно, то они отправляются на веб-сервер. На веб-сервере полученные данные обрабатываются скриптом, написанным на языке PHP, формируется и пересылается на браузер пользователя новая страница.
В скрипте,написанном на JavaScript, для доступа к данным, находящимся в форме, используются имена и индексы элементов формы. Для задания адреса (URL) страницы, содержащей PHP-скрипт, используется свойство action объекта Form. Отмена передачи данных из формы на веб-сервер делается оператором
event.returnValue= false
Пример 3.1 правильно выполняется в браузерах Internet Explorer 6.0 и Mozilla Firefox 2.0 .
Получение данных из всплывающего списка
Иногда можно полностью решать задачу ведения диалога с пользователем средствами JavaScript, не обращаясь к веб-серверу. В примере 3.2 пользователь вводит код цвета в модели RGB и выбирает из списка название цвета. После нажатия кнопки Ввод на экран выводятся окрашенные в выбранные цвета код и название цвета.
Пример 3.2
<html>
<HEAD><TITLE>СКИПТ SELECT </title> </head>
<body>
<!--Пример выбора и выводана экранэлемента списка Select -->
<SCRIPT>
function select_()
{ a=document.all.Kod.value //код цвета
b= document.all.Gor.selectedIndex
//номервыбранного элемента// спискаselect
c = document.all.Gor.options[b].text//текст элементасписка
d = document.all.Gor.options[b].value//передаваемое из формы
//значение<option value= red>
e="<FONT size= 7 color="+a+">"+a+"</font>"//трансляция и
document.all.alfa.innerHTML= e// вывод на экран HTML-строки
e= "<FONT size = 7 color= "+d+">"+c+"</font>"
document.all.beta.innerHTML= e
}
</script>
<H2>Подбор оттенков цвета</h2>
В первое поле нужно ввести шестнадцатеричный код цвета.<BR>
Например,красный цвет имеет код FF0000.
<BR>Из списка во втором поле выбирается для сравнения
<BR> один из основных цветов(красный, зелёный,синий)
<P>Введитекод цвета
<input TYPE= "text"name="Kod"> <P>Выберитецвет
<SELECT NAME= "Gor">
<option value="red">Красный </option>
<option value="yellow">Жёлтый </option>
<option value="maroon">каштановый</option>
<option value=green">Зеленый</option>
<option value="blue">Cиний
</select>
<P> <BUTTON onclick="select_()">Выполнить </button>
<P><B ID="alfa"></b>
<br> <B ID = "beta"></b>
</body>
</html>
Выполнить пример 3.2
В примере 3.2 нет необходимости использовать контейнер <FORM> …</form>, так как на веб-сервер ничего не передаётся.
Задача 3.1. Создайте сайт из двух страниц.Первая страница имеет заголовок Заказ мебели. На ней расположены два поля со списками (теги <SELECT>), поле (<INPUT>) и кнопка(<SUBMIT>). Из первого поля со списком пользователь выбирает изделие (шкаф, стол, сервант и т.д.).Из второго поля со спискомпользователь выбирает материал (дуб,орех, бук). В третье поле нужно ввести количество заказываемых изделий. После ввода данных необходимо проверить, все ли данные введены.Если обнаружена ошибка, то нужно вывести сообщение и предложить её исправить. Правильно введённые данные нужно отправить на веб-сервер.Вторая страница содержит написанный на PHPскрипт, с помощью которого формируется следующее сообщение:
| Ваш заказ принят | |
| Заказано изделие | – название заказанного изделия |
| Материал | – заказанный материал |
| Количество | – заказанное количество |
Указания к задаче 3.1