Контакты

Поиск по сайту

Категория: Chronoforms5 Опубликовано: 09 Февраль 2017

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

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

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

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

  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» слева) и прописываем в их поля «Контент» получившиеся массивы, не забывая про теги. Метки для этих элементов прописывать не обязательно.

Код для 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-ов.

Добавить сообщение

Форма входа

Индекс цитирования Яндекс.Метрика