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

В Chronoforms 5 разработчики показали основной принцип создания таких полей в одной из демо-форм (demo-dynamic-dropdown) с подгрузкой значений из массива. На этой форме два поля «dropdown» для выбора команд в различных лигах. Второе поле не сбрасывается при сбросе первого. Попробуем сделать такой сброс и, заодно, немного усложним пример, добавив к форме третий элемент «dropdown».

Чтобы получить тройной динамический select на форме, для начала определим категории и подкатегории. Можно продолжить с футбольными командами или создать новую форму и придумать свои категории и подкатегории.

У меня получились такие категории товаров.

  1. Для дома
    1. Пылесосы
      1. Вертикальные пылесосы
      2. Роботы-пылесосы
      3. Моющие пылесосы
    2. Климатическая техника
      1. Кондиционеры
      2. Вентиляторы
      3. Воздухоочистители
    3. Стиральные машины
      1. Автоматические
      2. Полуавтоматические
      3. Переносные стиральные машины
  2. Для кухни
    1. Крупногабаритная техника
      1. Холодильники
      2. Морозильные камеры
      3. Кухонные плиты
    2. Мелкая техника
      1. Мультиварки
      2. Блендеры и миксеры
      3. Мясорубки
    3. Встраиваемая техника
      1. Варочные панели
      2. Духовые шкафы
      3. Встраиваемые холодильники
  3. Для ремонта
    1. Электроинструменты
      1. Дрели
      2. Рубанки
      3. Фрезеры
    2. Ручные инструменты
      1. Отвертки, ключи
      2. Пилы, ножовки, лобзики
      3. Малярные инструменты
    3. Измерительные инструменты
      1. Рулетки и мерные ленты
      2. Лазерные уровни
      3. Лазерные дальномеры

Три поля select (dropdown) с именами и идентификаторами:

  1. Отдел — dd1
  2. Секция — dd2
  3. Категория — dd3

Размещаем их на форме (вкладка «Дизайнер», подраздел «Макет») и настраиваем в каждом из них пока только вкладку «Основные настройки». Должно получиться, примерно, так:

Остальные вкладки настроек этих полей в «дизайнере» пока не трогаем и переходим на вкладку настройки формы «Установка».

По условию, все наши три поля dd1, dd2 и dd3 взаимосвязаны и должны сбрасываться или изменяться в зависимости от действий пользователя.

Сделаем это так же, как на демо-форме, предложенной разработчиками, т. е. с помощью динамической подгрузки значений в поля из n-мерных массивов по событию. Каждому из 3-х полей будет соответствовать свое пользовательское событие и свой, прописанный в его коде, массив. Мерность массива будет зависеть от уровня вложенности категорий и подкатегорий созданного нами ранее списка.

Во вкладке настроек формы «Установка» нажатием кнопки «Добавить новое событие» создаем наши события с названиями load_dd1, load_dd2 и load_dd3. Затем размещаем в каждом по одному элементу «Custom code» из репозитория выбора обработчиков (меню «Основные»/«Basic» слева) и прописываем в их поля «Контент» получившиеся массивы, не забывая про теги. Метки для этих элементов прописывать не обязательно.

Обработчики событий формы с тройным select-ом Chronoforms5 на вкладке Установка

Код для load_dd1:

<?php
$dd1 = array (""     => "- Выберите раздел -",
              "val1" => "Для дома",
              "val2" => "Для кухни",
              "val3" => "Для ремонта",);
echo json_encode($dd1);
?>

Код для load_dd2:

<?php
    $dd2 = array (
                    ""     => array(
                                    "" => "- Выберите раздел -"),
                    "val1" => array(
                                    "" => "- Выберите секцию -",
                                    "val11" => "Пылесосы",
                                    "val12" => "Климатическая техника",
                                    "val13" => "Стиральные машины", ),
                    "val2" => array(
                                    "" => "- Выберите секцию -",
                                    "val11" => "Крупногабаритная техника",
                                    "val12" => "Мелкая техника",
                                    "val13" => "Встраиваемая техника", ),
                    "val3" => array(
                                    "" => "- Выберите секцию -",
                                    "val11" => "Электроинструменты",
                                    "val12" => "Ручные инструменты",
                                    "val13" => "Измерительные инструменты", ),
                    );
    
    echo json_encode($dd2[$form->data["dd1"]]);
?>

Код для load_dd3:

<?php
    $dd3 = array(
        "" =>     array(""     => array (""    => "- Выберите раздел -", ), ),
    
        "val1" => array(""     => array ("" => "- Выберите секцию -", ),
                        "val11" => array ("" => "- Выберите категорию -", "val111" => "Вертикальные пылесосы",
                                          "val112" => "Роботы-пылесосы", "val113" => "Моющие пылесосы",),
                        "val12" => array ("" => "- Выберите категорию -", "val111" => "Кондиционеры",
                                          "val112" => "Вентиляторы", "val113" => "Воздухоочистители",),
                        "val13" => array ("" => "- Выберите категорию -", "val111" => "Автоматические",
                                          "val112" => "Полуавтоматические", "val113" => "Переносные стиральные машины"), ),
                                          
        "val2" => array(""     => array ("" => "- Выберите категорию -", ),
                        "val11" => array ("" => "- Выберите категорию -", "val111" => "Холодильники",
                                          "val112" => "Морозильные камеры", "val113" => "Кухонные плиты",),
                        "val12" => array ("" => "- Выберите категорию -", "val111" => "Мультиварки",
                                          "val112" => "Блендеры и миксеры", "val113" => "Мясорубки",),
                        "val13" => array ("" => "- Выберите категорию -", "val111" => "Варочные панели",
                                          "val112" => "Духовые шкафы", "val113" => "Встраиваемые холодильники"), ),
                                          
        "val3" => array(""     => array ("" => "- Выберите категорию -", ),
                        "val11" => array ("" => "- Выберите категорию -", "val111" => "Дрели",
                                          "val112" => "Рубанки", "val113" => "Фрезеры",),
                        "val12" => array ("" => "- Выберите категорию -", "val111" => "Отвертки, ключи",
                                          "val112" => "Пилы, ножовки, лобзики", "val113" => "Малярные инструменты",),
                        "val13" => array ("" => "- Выберите категорию -", "val111" => "Рулетки и мерные ленты",
                                          "val112" => "Лазерные уровни", "val113" => "Лазерные дальномеры"), ),                                                       
    );
    echo json_encode($dd3[$form->data["dd1"]][$form->data["dd2"]]);
?>

После того, как прописали код для всех пользовательских событий, снова переходим на вкладку настройки формы «Дизайнер» и подключаем эти события к соответствующим им полям (вкладки «Events» или «События»):

  • для dd1
  • для dd2
  • во вкладке dd3 ничего указывать не нужно. Оставляем, как есть.

Во вкладках «Динамические данные» для всех трех элементов «Dropdown» в полях «Включено» должны быть значения «Нет», т. к. база данных для подгрузки переменных в поля не используется. Вкладки «Валидация» настраиваем в зависимости от того, обязательно данное поле или нет.

Теперь форму можно сохранить и проверить работу select-ов.

Скачать резервную копию формы можно здесь.

Хостинг TimeWeb

Комментарии
  • #
  • Алексей
Здравствуйте! Сколько над ней не бился - не работает у меня данный пример :((
  • #
  • Vilza
Здравствуйте.
Пример полностью рабочий (иначе его бы здесь не было :) ). Проверьте внимательно все настройки. Или возьмите демку с командами от cf5. Собственно, оттуда и брали пример. Просто добавили третий select и немного расширили задачу.
Сейчас на сайте, вот здесь https://chronoforms.net/zagruzki/forma-cf6-s-vyborom-poluchatelej-iz-spiska есть форма с выбором получателя из списка - она работает так же (т.е основной массив там один, но принцип выборки из него тот же), если я правильно помню, но она для cf6.
  • #
  • Алексей
Да я с демкой и работаю - 2х уровневая (родная) настраивается. Правдам код несколько другой:
Код:<?php
$clubs = array(
"ENG" => array("Arsenal" => "Arsenal", "Chelsea" => "Chelsea", "Liverpool" => "Liverpool", "Manchester" => "Manchester"),
"GER" => array("Bayern Munchen" => "Bayern Munchen", "Dortumund" => "Dortumund", "Shalcke" => "Shalcke"),
"ITA" => array("Juventus" => "Juventus", "AC Milan" => "AC Milan", "Inter" => "Inter", "Roma" => "Roma", "Napoli" => "Napoli"),
"ESP" => array("Real Madrid" => "Real Madrid", "Barcelona" => "Barcelona", "Valencia" => "Valencia"),
);
echo json_encode($clubs[$form->data["league"]]);


А этот ни в какую :(
http://shouvolna.ru/index.php?option=com_chronoforms5&chronoform=demo-dynamic-dropdown
  • #
  • Vilza
Старую форму даже не пыталась искать - статья старая.
Только что сделала по ней новую форму и выложила для скачивания.

Можете сверить настройки селектов и событий по ней.
  • #
  • Алексей
Спасибо! А как ее добавить в форму? Извините, никогда не сталкивался :(
  • #
  • Vilza
Распаковать архив => перейти в панель управления cf5 => нажать на кнопку "восстановить" => выбрать распакованный файл .cf5bak (в верхней строке для версии 5) => нажать на кнопку подтверждения => опубликовать форму
  • #
  • Алексей
Огромное спасибо!!!!!!!
  • #
  • Алексей
Приветствую! Еще раз большое спасибо - всё получилось!
Насколько я понял Вы хорошо разбираетесь в chronoforms. Может ещё поможете? :)
Возможно ли сделать так, чтоб каждой заявке присваивался свой уникальный порядковый номер, который сообщался бы в конце? Типа: "Ваша заявка успешно отправлена. Вам присвоен № 05" И если да, то как?
  • #
  • Vilza
Это уже не по chronoforms вопрос, а, скорее, по joomla или знанию php.
Все зависит от того, существует ли "в природе" такой порядковый номер (например, какой-то компонент по сбору информации о таких заявках, привязка к id статьи и тп), или же вы рассчитываете его генерировать рандомно (можно, например, собирать номер из двух составляющих: рандом + текущая дата). В обоих случаях все зависит от вашей "фантазии" и знаний движка и php.

Выводить полученный номер можно в поле (включающее тему письма, например) или же сразу в теле шаблона письма, отправляемого пользователю и/или администратору.
  • #
  • Алексей
Здравствуйте! Спасибо! Вы мне очень помогли! А как сделать чтоб при выборе был переход с поля Dropdown на другое (например Checkbox Group). А еще лучше - при выборе одного параметра был переход на Checkbox Group, а другого на Checkbox)
  • #
  • s.elena133
Если правильно помню, то принцип заполнения у них одинаков (если вы о заполнении лэйблов чекбоксов в зависимости от выбора). И там и там структура одинакова (options). Динамически заполняются все эти элементы: и dropdown, и checkbox, и radio (в cf6 загружали из базы данных, по крайней мере).
Попробуйте подставить имена ваших чекбоксов вместо dd1, dd2 и т.д.
  • #
  • Алексей
Спасибо что откликнулись! Да я уже по-всякому пробовал... Никак не заставить перейти с одного типа поля на другой. Может у Вас хоть какой-то пример или образец есть? Весь интернет перерыл нигде нужного ответа не нашел
  • #
  • s.elena133
Конкретно вашу форму придется искать по интернету долго :-)
Нет, готовых примеров для чекбоксов и радио для cf5 у меня на данный момент нет.
Попробуйте поискать на форуме https://www.chronoengine.com/forums?view=board похожие варианты, что-то есть наверняка.
  • #
  • Павел
Добрый день! В ChronoForms 6 я глубокий чайник... но стоит задача создать форму с большим количеством различных типов взаимозависимых полей (dropdown, radios, checkboxes...). Значения вариантов выбора в последующих полях зависят от выбранных значений в нескольких предыдущих полях --> с этим я слава богу разобрался )) . В результате выбора пользователем значений во всех полях должна сформироваться маркировка для заказа. То есть, выбранное значение из каждого поля должно попасть в некий единый контейнер в виде текста, готовой маркировки для заказа изделия. Предполагаю что надо выбранные значения в каждом поле присвоить переменным и объединить их (значения этих переменных) в Textarea, но сделать это пока никак не получается... Помогите пожалуйста побороть сию задачу. Заранее благодарю.
  • #
  • Vilza
Здравствуйте.
Попытайтесь найти ответ на свой вопрос в мануале к cf6 на страницах 37-38. Мануал можно взять или на форуме chronoengine, или на нашем сайте в описании к разделу "Документация". Возможно, также вам поможет вот эта статья https://chronoforms.net/articles/qiwi-platezhi-po-protokolu-rest-s-pomoshchyu-form-chronoforms6 в части "Создание формы для отправки счетов серверу Qiwi".
Также, прочтите пожалуйста предпоследний абзац описания к разделу сайта "Статьи".
Добавить комментарий