В сегодняшнем уроке мы рассмотрим довольно интересный пример - связанные между собой поля формы.
Подобные поля можно очень часто встретить при заполнении форм, в которых необходимо указать страну и после этого появляется список городов на выбор.
sourse
Для осуществления этого нами будет использована технология ajax вместе с php.
Для начала давайте рассмотрим структуру формы:
<form action="" method="post">
<table>
<tr>
<td>Страна: </td>
<td><select id="dhtmlgoodies_country" name="dhtmlgoodies_country" onchange="getCityList(this)">
<option value="">Выберите страну</option>
<option value="ru">Россия</option>
<option value="ua">Украина</option>
<option value="us">США</option>
</select>
</td>
</tr>
<tr>
<td>Город: </td>
<td><select id="dhtmlgoodies_city" name="dhtmlgoodies_city">
</select>
</td>
</tr>
</table>
</form>
Как мы видим - все предельно просто. Уже заданы три страны. После того как юзер какую-либо страну выберет, автоматически подгрузятся города из внешнего файла.
Для этого в хедере данного документа нам необходимо подключить два файла:
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="chained.js"></script>
Первый это что-то вроде фреймворка, а второй непосредственно отвечает за получение городов из отдельного php файла.
Давайте посмотрим как этот файл выглядит:
<?php
if(isset($_GET['countryCode'])){
switch($_GET['countryCode']){
case "ru":
echo "obj.options[obj.options.length] = new Option('Москва','1');\n";
echo "obj.options[obj.options.length] = new Option('Санкт-Петербург','2');\n";
echo "obj.options[obj.options.length] = new Option('Волгоград','3');\n";
echo "obj.options[obj.options.length] = new Option('Владивосток','4');\n";
break;
case "ua":
echo "obj.options[obj.options.length] = new Option('Киев','11');\n";
echo "obj.options[obj.options.length] = new Option('Одесса','12');\n";
echo "obj.options[obj.options.length] = new Option('Львов','13');\n";
break;
case "us":
echo "obj.options[obj.options.length] = new Option('Нью-Йорк','21');\n";
echo "obj.options[obj.options.length] = new Option('Чикаго','22');\n";
echo "obj.options[obj.options.length] = new Option('Вашингтон','23');\n";
break;
}
}
?>
Если внимательно присмотреться к форме, то у каждой страны есть свой уникальный ID. Так вот этот ID и показывает скрипты какие именно города стоит выводить. В файле ID выглядит так: case "ru".
Еще в данном примере есть несколько простых стилей оформления, но они абсолютно несущественные. Я уверен, что у Вас получится оформить данную форму намного красивее.