Подпишись на наши RSS Уроки по Фотошоп , просто щелкнув по иконке.


Новинка! Узнайте о Самом Результативном Способе Изучения Фотошопа, Без Посещения Дорогих Курсов, Без Черно-Белых Самоучителей и Без Метода Тыка!

10 Часов Практических Уроков Записанных с Экрана Монитора с Подробными Аудио-Комментариями сделают из Вас настоящего Учителя Фотошоп!

Подробнее..


Создаём новогоднюю поздравительную открытку
Создаём сложное выделение волос
Превращаем современную фотографию в старую
Создаём разноцветную светящуюся спираль
Наносим естественную татуировку в Фотошопе


Связанные между собой поля формы


В сегодняшнем уроке мы рассмотрим довольно интересный пример - связанные между собой поля формы.


Подобные поля можно очень часто встретить при заполнении форм, в которых необходимо указать страну и после этого появляется список городов на выбор.


Демо версия находится здесь. Файлы можно скачать тут.


Для осуществления этого нами будет использована технология 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".


Еще в данном примере есть несколько простых стилей оформления, но они абсолютно несущественные. Я уверен, что у Вас получится оформить данную форму намного красивее.


Всех с праздником труда! Мир! Труд! Май!


Данный урок подготовлен для Вас командой сайта http://ruseller.com




Если хотите не упустить данный урок, добавьте его в закладки:  

Хотите освоить весь Фотошоп с нуля?

Рекомендую Вам курс "Учитель Фотошопа в видеоформате", который состоит из 2-х частей: теоретической и практической. Все уроки даны в видеоформате с подробным озвучиванием всех выполняемых действий. Именно такой подход в изучении, позволит Вам в максимально короткие сроки овладеть всеми аспектами работы в Фотошоп.

Узнать подробнее

Рейтинг:     Добавлено: 2009-05-02    Просмотров: 2760    Сайт-источник: www.dhtmlgoodies.com

Оцените урок: 1   2   3   4   5   6   7   8   9   10    



Комментарии (6)


Комментарий by neman, От 2009-08-22

Как связать 3 поля формы?

Комментарий by Дима, От 2009-12-03

Как можно связать три поля, если данные находятся не в файле, а в базе MySql

Комментарий by evgeny, От 2010-08-09

правильный вопрос по поводу MySql... только не вижу ответа от уважаемой команды ruseller.com ... Еще странное поведение самого файла getcities.php: при добавлении в него какого-нибудь другого кода он просто перестает работать.. с чем это связанно?

Комментарий by Дима, От 2010-08-18

правильный вопрос по поводу MySql... (http://video-college.com)

Комментарий by Сергей, От 2010-08-29

Здравствуйте, подскажите: на локальном все работает, на сервере второй список не подгружается.

Комментарий by Иван, От 2010-12-01

Интересный вариант, применил его на http://mirphotoshop.ru/

Оставить комментарий:

Ваше имя:

Комментарий:

Введите число показаное на картинке (проверка от автороботов):

  


 

Рассылка - "Лучшие видеоуроки Фотошоп даром". Подписавшись на неё, Вы 2 раза в месяц будете получать на свой почтовый ящик, ссылки на лучшие уроки по работе в программе Adobe Photoshop совершенно бесплатно!

Лучшие уроки по Фотошопу 2 раза в месяц!

Ваше имя на русском: *
Ваш Email адрес: *

Подпишитесь сейчас и получите доступ к разделу "Лучшие уроки Фотошопа".


Если Вы давно мечтаете о создании собственного сайта на движке Drupal, то советую Вам обратить внимание на мой новый видеокурс "Drupal - Как создать профессиональный сайт с нуля". Это более 100 видеоуроков из которых Вы узнаете, как создать 4 сайта различной напрвленности, сложности и функционнальности.

Узнать подробнее


Для ретуширования обязательно создайте копию изображения, чтобы оригинал на всякий случай оставался нетронутым. В дополнение к этому создайте копию слоя Background (Задний план), чтобы не править его непосредственно. Так будет легче отме- нить нежелательные исправления.

Узнать больше


Внимание!
X
Хотите Получать 2 Видеоурока по Работе В Программе Фотошоп ЕЖЕМЕСЯЧНО?
Ваш e-mail: *
Ваше имя: *