четверг, 12 декабря 2013 г.

Chrono Forms - Формы для Joomla!


Chrono Forms –удобный компонент для создания пользовательских форм с широкими возможностями. На момент написания поста последняя версия имеет номер 4. Функционал компонента представлен визуальным и ручным редакторами форм, причём в визуальном редакторе есть возможность добавлять различные события (например, оправка EMAIL, запись формы в БД и даже отладчик). Работа с событиями осуществляется через Wizard, вкладка Events и все они удобно разделены на 2 группы по времени исполнения:
  1. On Load – события обрабатываемые по загрузке формы (Auto Java Script Validation,Show html)
  2. On Submit – события обрабатываемые после подтверждения формы (Email, DB Save)

Кратко об основных событиях:


Отправка EMAIL (Email)

Функция отправки Email – это, наверное, основная причина по которой многие устанавливают этот компонент. В свойствах события отправки Email пользователю предоставляется возможность создать шаблон письма, используя визуальный редактор текста или HTML/CSS/PHP. Можно сгенерировать шаблон автоматически, тогда Chrono Forms просто создаст таблицу с двумя колонками и выведет в левый столбец лейблы, а в правый – значения соответствующих им полей (в шаблоне они задаются такой вот незамысловатой конструкцией: {имя_компонента_формы}). Также в свойствах можно задать email адреса и темы для отправки сообщений с содержимым подтверждённых форм администратору (это делается во вкладке Static) или пользователям, заполняющим формы, на указанные ими в форме адреса (это делается во вкладке Dynamic, причём сюда прописываются названия соответствующих полей формы, для того чтобы система брала оттуда значения).


Сохранение в БД (DB Save)

Для каждой формы возможно создать таблицу в БД с полями соответствующими полям форм и сохранять туда отправленные пользователем формы для дальнейшей обработки. Создать таблицу для форм(ы) можно прямо на главной странице компанента Chrono Forms. Кроме того это может потребоваться для того чтобы присваивать пользовательским формам порядковый номер.  


Как скрыть поля на форме и при этом не попасться на валидации

В ряде случаев может потребоваться скрывать некоторые поля при выборе определённых опции, например в форме оформления заказа при выборе способа доставки “Самовывоз” пользователю совсем не обязательно вводить свой адрес, поэтому эти поля необходимо скрыть (забавно, что в предыдущем своём посте я так же как-раз писал о сокрытии полей в корзине MiniShop2 для ModX) и при этом отключить для них проверку, иначе не миновать непонятных требований о заполнении полей, которых просто нет на форме. И наоборот, ври выборе опции отличной от “Самовывоз” необходимо показать поля для ввода адреса доставки и сделать их обязательными для проверки.

В коде формы можно увидеть, что обязательным для ввода полям назначен класс validate['required']" (validate['email']", validate['number']" и т.д.), означающий что компонент формы подлежит проверки(валидации) по определённому признаку. Добавлять и удалять этот класс для скрываемых полей или других компонентов формы бессмысленно, так как скрипт проверки загружается сразу после загрузки формы и хотя он активируется только после подтверждения формы, любые изменения в ней после загрузки срипта проверки игнорируются.

Решение гениальное и простое: вместо изменения класса соответствующие компоненты формы необходимо просто отключать через атрибут disable, т.к. компоненты с этим атрибутом игнорируются скриптом проверки после подтверждения формы и даже не смотря на то, что им присвоен класс validate[‘ ’].
*добавить и удалить атрибут disable можно посредством следующего кода JavaScript:

  • document.getElementById(id).setAttribute('disabled','disabled'); 
  • document.getElementById(id).removeAttribute('disabled');