- Подробности
-
Категория: PHP. Синтаксис
В сегодняшнем первомайском уроке мы рассмотрим довольно интересный пример — связанные между собой поля формы.
Подобные поля можно очень часто встретить при заполнении форм, в которых необходимо указать страну и после этого появляется список городов на выбор.
demosourse
Для осуществления этого нами будет использована технология 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".
Еще в данном примере есть несколько простых стилей оформления, но они абсолютно несущественные. Я уверен, что у Вас получится оформить данную форму намного красивее.
Всех с праздником труда! Мир! Труд! Май!
