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

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

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

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".

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

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

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.dhtmlgoodies.com
Перевел: Максим Шкурупий
Урок создан: 1 Мая 2009
Просмотров: 58213
Правила перепечатки


5 последних уроков рубрики "PHP"

  • Фильтрация данных с помощью zend-filter

    Когда речь идёт о безопасности веб-сайта, то фраза "фильтруйте всё, экранируйте всё" всегда будет актуальна. Сегодня поговорим о фильтрации данных.

  • Контекстное экранирование с помощью zend-escaper

    Обеспечение безопасности веб-сайта — это не только защита от SQL инъекций, но и протекция от межсайтового скриптинга (XSS), межсайтовой подделки запросов (CSRF) и от других видов атак. В частности, вам нужно очень осторожно подходить к формированию HTML, CSS и JavaScript кода.

  • Подключение Zend модулей к Expressive

    Expressive 2 поддерживает возможность подключения других ZF компонент по специальной схеме. Не всем нравится данное решение. В этой статье мы расскажем как улучшили процесс подключение нескольких модулей.

  • Совет: отправка информации в Google Analytics через API

    Предположим, что вам необходимо отправить какую-то информацию в Google Analytics из серверного скрипта. Как это сделать. Ответ в этой заметке.

  • Подборка PHP песочниц

    Подборка из нескольких видов PHP песочниц. На некоторых вы в режиме online сможете потестить свой код, но есть так же решения, которые можно внедрить на свой сайт.

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 2 Мая 2009 09:19
    dima
    надо будет в регистрации применить сий скрипт!))), ток думаю уж больно большой массив получиться для перечисления списка городов...((
    • 6 Сентября 2011 12:41
      hlopec_roman
      json рулит...
  • 2 Мая 2009 11:13
    Александр
    Здравствуйте Евгений! Мне очень понравился этот урок. Хотел бы Вам сказать чтобы Вы поправили ссылку на источник этого урока, а также ссылки на источники в уроках: "Shoutbox - миниЧат для вашего сайта!", "Скроллер изображений на jQuery" Спасибо Вам за всё, что Вы делаете, за все Ваши советы, пожелания, статьи, уроки, ну и конечно за все Ваши диски, один из которых я у Вас покупал: "Joomla. Профессиональный сайт за один день" Мне он очень помог. Я хотел бы, чтобы такой профессионал как Вы создали второй диск по PHP и MySQL для профессионалов в дополнение к Вашему замечательному I диску. Желаю Вам всего наилучшего и всего того, что Вы сами себе желаете. Здоровья Вам, Вашей жене Зинаиде и конечно Вашему родившемуся сыну. С уважением к Вам, Ваш подписчик и друг - Александр Рубанов из Камышина, Волгоградской области!
  • 2 Мая 2009 11:19
    МаксимШкурупий
    Александр, в данном уроке ссылка работает! поправлять ничего не надо :)
  • 2 Мая 2009 11:22
    aleksey
    Привет Камышину, три столба у музея уже снесли?
  • 2 Мая 2009 11:29
    dima
    максим не работаем таргетная ссылка на источник урока, вот щас как: http://www.ruseller.com/%22http://www.dhtmlgoodies.com/%22
  • 2 Мая 2009 11:31
    advokat
    Очень интересный урок! А кто нибудь знает, как сделать единую форму с отправкой полей ФИО, Сообщение и + прикрепленный файл, т.е. прикреплять какой либо файл например JPG и отправлять. Если подскажите - буду благодарен.
  • 2 Мая 2009 11:43
    zyat
    Помог.
  • 2 Мая 2009 11:49
    МаксимШкурупий
    а! ясно )) будем исправлять! спасибо!
  • 2 Мая 2009 12:29
    delphi
    Да круто, примерно месяц назад не знал как это сделать, потом разобрался сам. Теперь небольшая просьба к Администрации сайта и к Евгению лично, думаю все меня поддержат.... Итак: Евгений не могли бы вы посоветовать или выложить тут скрипт, который будет определять город посетителя по его IP адресу. Такая вещь нужна многим web мастерам, а в сети по этом поводу информации крайне мало( ВСЯ НАДЕЖДА НА ВАС !
  • 2 Мая 2009 12:42
    dima
    Максим, планируются ли уроки по SEO в ближащее время?
  • 2 Мая 2009 13:12
    МаксимШкурупий
    Насколько мне известно по SEO пока уроки не планируются.
  • 2 Мая 2009 13:33
    SergStril
    Не понял, а почему в списке нет города Запорожье (шутка) :-). А если серьёзно, ОГРОМНОЕ СПАСИБО, вам всем, кто делает интересные а главное нужные уроки. Удачи вам и всего самого наилучшего.
  • 2 Мая 2009 14:43
    trias
    Спасибо большое за урок! А можно сделать так, что бы изначально пункта город не было (т.е. поле вообще отсутствовало), а он появлялся только при выборе страны? Успехов Вам во всех Ваших начинаниях.
  • 2 Мая 2009 16:04
    dima
    trias, а смысл? все равно это поле не активно,если не выбрал страну)))
  • 2 Мая 2009 16:07
    trias
    Ну вот для примера, в первом поле город (областной центр) или область. Если выбран город, то второе поле вообще не нужно, если область, то во втором поле появляется список городов в области.
  • 2 Мая 2009 16:59
    yaЕвген
    for delphi, смотри тут http://ipgeo-base.ru/cgi-bin/Software.cgi
  • 2 Мая 2009 18:48
    dima
    оО нужно а на php сию весчь не подскажите!??
  • 8 Мая 2009 07:54
    gexusa
    А на Joomla такое можно ???
  • 10 Мая 2009 14:54
    dima
    gexusa, в джумле есть готовая форма регистрации. там ничо программировать ненадо, этож готовая cms!)))
  • 11 Мая 2009 17:40
    TRAHOMOTO
    Вцелом: Хороший пример спасибо!!, но стоило бы реализовать jQuery. Иначе приходится прикручивать две библиотеки. По примеру:
  • 11 Мая 2009 17:41
    TRAHOMOTO
    1. файл chained.js открываем и удаляем блок <code> function getSubCategoryList(sel) { .... } function createSubCategories(index) { ... } </code> Это остатки от другого примера 2. При работе с БД в файле getcities.php следует подключится к серверу и выбрать БД
  • 5 Июля 2009 17:16
    YVSIK
    Из какого внешнего файла где его взя-то по моему его тут нет тогда о чем идет речь.
  • 18 Августа 2009 12:43
    dsn
    Что то не пойму ничего не работает. Список стран есть, но при выборе страны список городов не подгружается. Может кто подскажет???
  • 22 Августа 2009 13:08
    neman
    Подскажите, как сделать чтобы при выборе из списка меню определенного пункта появлялось новое текстовое поле в форме?
  • 2 Октября 2009 21:40
    Андрей
    Автору: dsn Загрузи на сервер файлы и все будет работать
  • 2 Октября 2009 22:01
    Андрей
    супер скрипт!!!=)
  • 9 Октября 2009 18:50
    bismon
    Все бы классно, но, как его прикрутить к базе данных, в которой 45 тыс. записей? И цены бы не было...
  • 23 Октября 2009 14:43
    sineddenis
    Здравствуйте! Все супер работает!Спасибо! а не подскажете как сделать такое: есть таблица БД mysql с полями наименование и цена, я делаю на форме выпадающий список из поля Наименование, а как сделать так чтобы в зависимости от того что я там выбрал в обычном текстовом поле на форме ставилась цена того что я выбрал?!
  • 28 Октября 2009 20:38
    piton
    Народ подскажите плиз!мне надо добавить ещё одно поле - район!
  • 29 Октября 2009 22:11
    Deonis
    Спасибо, очень полезно! Но у есть меня вопрос - как сделать так, чтоб выбирались (пусть относительно Вашего примера) пункты из базы данных? Предположим, если города добавляются или удаляются. Очень поможете.
  • 3 Ноября 2009 13:22
    Snatch
    Добрый день. Очень нуждаюсь в вашей помощи. Сейчас делаю форму с использованием этого урока, но не множечко по другому, но это не важно. Вопрос в следующем: в файле chained.js 32 строка: ajax[index].requestFile = 'getSubCategories.php?category='+category; очень интересно, что это за файл, зачем он там нужен, и где его взять,если он действительно нужен! очень жду ответа!
  • 18 Ноября 2009 05:12
    vmtiu
    Привет Почему заместо городов какие то символы?
  • 18 Ноября 2009 09:10
    Сергей_Патин
    Поменяйте кодировку.
  • 22 Ноября 2009 00:17
    nwarap
    Кто-нибудь знает какое расширение позволяет добиться того, что описано в этой статье в Joomle?
  • 3 Декабря 2009 10:45
    Дима
    Евгений, здравствуйте! Сайт у Вас просто потрясный, очень много полезного, часто тут бываю. Подскажите пожалуйста, действительно как можно реализовать этот же пример, но с БД MySql. Очень нада, спасибо.
  • 9 Декабря 2009 03:28
    OldAlbert
    На localhost не работает, положил на хост сайта - все заработало. Есть мысли, как запустить на локале для отладки?
  • 9 Декабря 2009 05:12
    OldAlbert
    to Дима: Если я правильно понял, то речь идет об обращении к БД в рамках php+MySQL ? Ну здесь все просто. Если надо вынуть и "страну", и "город" из БД, то меняем код начиная со второй option value на запрос к БД, затем цикл do+while с printf внутри. Кстати, обратите внимание, что после выполнения условия while $myrow будет уничтожена. Далее в getcities.php после условия if снова обращаемся к БД и делаем запрос на переданное значение countryCode, оно же dhtmlgoodies_country. Оператор swith вместе со всеми case делим и снова пишем do+while с printf внутри. Надеюсь, понятно объяснил? Просто сам только что сделал... ;)))
    • 27 Ноября 2012 22:45
      kala4off
      Извините! а можно код, а то так разобраться совсем не могу((( Почему то стоит только изменить getcities.php - он перестает работать.(
  • 4 Января 2010 15:00
    Кирилл
    Для OldAlbert У меня на локальном все заработало нормально, стоит WampServer
  • 6 Февраля 2010 13:27
    Synthetica
    Очень долго искал этот урок, самая подходящая вещь для сайта турфирмы. Но столкнулся с проблемой!!! Очень нужна помощь! Когда вручную прописываю файл getcities в форме города отображаются кирилицей! Когда города генерируются из базы данных выдает каракули! Как можно это исправить?
  • 9 Февраля 2010 21:20
    karas
    Synthetica пересохраните файл getcities.php в кодировке windows-1251... в примере он в кодировке UTF-8
  • 2 Марта 2010 08:20
    Vasek
    Помогите разобраться с кодировкой!!! Переделал под запрос на извлечение из базы данных, вроде заработало(в смысле количество каракуль совпадало с количеством символов результата), только выдавались каракули. Почитал то, что народ написал про кодировку, сделал через преобразование используя функцию iconv ("utf-8", "windows-1251", "1 тест") выдает цифру, а слово тест пропало. Как быть???
  • 9 Марта 2010 12:49
    Trinithy
    Не демо ни исходники не пашут
  • 1 Апреля 2010 23:46
    wader
    чтобы небыло проблем с кодировкой. После соединения с БД нужно написать вот такие строчки кода. mysql_query ("set character_set_client='cp1251'"); mysql_query ("set character_set_results='cp1251'"); mysql_query ("set collation_connection='cp1251_general_ci'");
  • 5 Мая 2010 09:51
    Vasek
    Всё очень даже замечательно пашет! Спасибо за урок! Предлагаю переписать урок, создать с использованием jQuery.ajax Думаю должно быть намного проще.
  • 26 Августа 2010 18:01
    webdrakon
    Здравствуйте, подскажите: на локальном все работает, на сервере второй список не подгружается.
  • 1 Октября 2010 17:01
    Trinithy
    У меня другой вопрос допустим мне надо сортировать марки и модели авто а их очень много, а в базе они у меня уже существуют как бы мне это все обтяпать?
  • 7 Октября 2010 11:22
    adios
    Проблема с кодировкой после выборки из базы.. Перепробавал все что предложено ниже, то каракули то вопросы.. Помогите?
  • 15 Ноября 2010 02:36
    Dmitry
    Подскажите, пожалуйста, кто-нибудь как в данный срипт добавить третью зависимую форму, например население каждого из городов, буду очень вам признателен, если кто-нибудь поделится мыслями, моно сюда soroka2007@inbox.ru
  • 18 Ноября 2010 13:13
    ksenaf
    У кого есть решение с добавлением третьей зависимой формы? Объясните пожалуйста - как добавить!!!! Можно на e-mail: ksenaf@i.ua
  • 4 Декабря 2010 20:57
    art8316
    Кто подскажет как при выборе определенного пункта из списка (например выбираем "Россия" и "Москва") эти значения ставились бы в текстовое поле формы?
  • 5 Декабря 2010 18:57
    art8316
    Хотя уже не надо. Спасибо. Решил задачу другим методом. Но былобы неплохо сделать такой урок. Многим может пригодиться идея динамического заполнения форм, в зависимости от выбранных условий.
  • 26 Января 2011 00:08
    Артем Чуб
    Урок хорош, но у меня почему то вторая форма не меняется, в чем может быть проблема?
  • 26 Января 2011 01:50
    Артем Чуб
    почему неработало уже разобрался, скажите, а как сделать чтобы на русском кодировка была? иероглифы вылазят
  • 11 Марта 2011 22:49
    Аmadeo
    Аууууу. Народ есть кто? Есть кто с клавиатурой и с мышкой? Откликнитесь аууууу!
  • 12 Марта 2011 15:32
    Аmadeo
    Помогите разобраться.
  • 12 Марта 2011 15:41
    Аmadeo
    Куда подевался мой вопрос 11 Марта 2011 22:10? Помогите разобраться, туплю очень. Никак не получается. В хеде я должен вставить
    <хед>
    <скрипт тип="текст/яваскрипт"src="аякс.js"></скрипт>
    <скрипт тип="текст/яваскрипт"src="chained.js"></скрипт>
    <?php
    если(isset($_получить['странаКод'])){
    переключатель($_получить['странаКод']){
    case"ru":
    ехо"obj.опции[obj.опция.длина]=новая Опция('Москва','1');\n";
    ехо"obj.опции[obj.опция.длина]=новая Опция('Санкт-Петербург','2');\n";
    и.т.д
    ?>
    </хед>
    <тело>
    <форма действия ="метод="post">
    <table>
    <тр>
    <тд>Страна:</тд>
    <тд><выбрать ид="dhtmlgoodies_страна" имя="dhtmlgoodies_страна"
    И.т.д
    </форма></тело>
    так не получается.
  • 15 Марта 2011 19:21
    armancho7777777
    Как сделать чтобы на русском кодировка была? крокозябры вылазят.
    • 7 Декабря 2012 20:18
      Коля Клевец
      Измени кодировку файла на ANSI в NotePad++!
  • 16 Апреля 2011 04:51
    Андрей Пашко
    Народ подскажите плиз! как мне надо добавить ещё одно поле - район!
  • 17 Апреля 2011 17:35
    Андрей Пашко
    как добавить ещё одно поле - район! Ответ есть здесь http://www.linkexchanger.su/2009/82.html
  • 2 Мая 2011 13:21
    mor55
    Всем привет. Работаю с подобным кодом, только немного можно сократить код, если много данныйх. Но не могу понять как сделать запоминание во 2-м поле, при нажатии кнопки отправить. С 1-м полем, та никаких проблем, можно спокойно на PHP приставить. А во 2-е поле нужно на яваскрипт дописать. Мож кто в курсе? Вот сам движок на яваскрипт: http://www.tigir.com/js/linkedselect.js
  • 6 Сентября 2011 23:20
    ss_400
    приветствую! помогите с проблемой, делаю в DRUPALE аналогичные зависимые поля и не могу найти модули которые корректно работают, я так понимаю что данный скрипт можно использовать и там, а как мне это сделать подскажите направление. благодарю заранее, данная проблема очень актуальна насколько я уже успел увидеть и думаю что не только я буду благодарен за помощь
  • 14 Сентября 2011 15:39
    Rost1slaV
    Подскажите пожалуйста, как мне узнать значение выбранных элементов?
  • 11 Июля 2012 22:45
    MaxRA
    Здравствуйте, разобрался как выводить данные из БД. У меня форма POST, так вот... C первым select'ом все нормально, так как там для отправки формы в <option value='$id'> id отправляется, а во-втором проблема... Как во втором select'е в <option value вставить id из БД?
  • 27 Ноября 2012 22:55
    kala4off
    Кому нибудь удалось подключить это к БД?
  • 8 Декабря 2012 14:41
    Gendal_f
    Потратил пол дня, но решил проблему кодировки на локальном сервере в частности на денвере.. В корневую папку кидайте файл .htaccess в него прописывайте одну строчку
     AddDefaultCharset utf-8 
    В общем проблема вся в том что у денвера по умолчанию стоит кодировка чарсет 1251 а сам скрипт работает на кодировке utf8 (да и вообще весь jquery и ajax) разница кодировок и по этому он отображает русский как крякозябры.. Надеюсь доступно объяснил.. откликнитесь если я вам помог )
  • 10 Декабря 2012 23:24
    Gendal_f
    нашел другой способ как решить проблему кодировок, вместо букв передавайте в обработчик цифры)
     <option value="1">Россия</option> 
    ну и естественно не забывайте исправить вот тут
    case "1": echo "obj.options[obj.options.length] = new Option('Москва','1');\n";
    break;
    
    тогда не нужно будет ломать денвер. кому интересно как прикрутить все это к БД дайте знать выложу инструкцию.
    • 26 Февраля 2013 12:06
      kirill.romantik
      а на счёт кодировки: в notepad++ на вкладке Кодироваки надо ставить: кодировать в ANSI
    • 24 Января 2014 22:17
      tolibovnosir
      Спасибо за урок! Пожалуйста напишите как прикрутить это все к БД mysql?
  • 24 Февраля 2013 19:22
    kirill.romantik
    сделал тоже самое с Выбрать пол, и соответственно полу выпадает Статус отношений(Мужской - не может быть замужем... и тд), а потом немного поколдовав, сделал чтоб при обновлении страницы, выбранные раньше позиции были selected - браво)))
  • 22 Мая 2013 12:45
    savastr
    А как сделать сравнение двух полей? Поясню. Предположим, что список полей одинаков, но каждая строка списка имеет конкретное число (например, каждый город имеет разную численность населения). Так вот при выборе разных городов сравнивалась бы их численность и выводился город с наибольшей численностью. Для примера численность населения Москвы 12 млн, а нью-йорка 8, после выбора этих двух городов выводилось бы наибольшее значение, т.е. Москва.
  • 2 Ноября 2016 15:47
    n1ck_orlov
    Скачал исходники - ничего не работает и PHP кода там нет, хотя в статье он есть.
^ Наверх ^