Как сделать список с возможностью множественного выбора в eForm на MODX Evolution

Многие возможно не догадываются, но у сниппета eForm в MODX Evolution есть стандартная возможность для создания и обработки списков HTML-элементом select с возможностью множественного выбора пунктов.

Выбираем, что-нибудь от балды, кликаем по кнопочке:

Множественный выбор в сниппете eForm MODX Evolution

Получаем результат:

Множественный выбор в сниппете eForm MODX Evolution - скришот 2

А теперь реализация…

1. Содержимое ресурса:

[[eForm? 
&formid=`online-zapis-form` 
&tpl=`online-zapis-form`
&to=`sales@organizacia.com` 
&report=`online-zapis-submit-message` 
&thankyou=`online-zapis-report-message` 
&vericode=`0`
]]
  • tpl — чанк формы;
  • to — ящик куда скидывать письмо;
  • report — как будет выглядеть посылаемое письмо;
  • thankyou — сообщение, которое увидит посетитель, если письмо отправлено успешно.
  • vericode — капча, в примере она не нужна, потому ставлю 0.

2. Чанк online-zapis-form — форма

[+validationmessage+]
<form id="online-zapis-form" class="form-horizontal" role="form" method="post" action="[~[*id*]~]">
  <input type="hidden" name="formid" value="online-zapis-form" />

  <div class="form-group">
    <label for="service" class="col-sm-2 control-label">Выберите услуги</label>
    <div class="col-sm-10">
    <select class="form-control" size="8" id="subject" name="service[]" eform="Телефон::1" eform="Услуга::0" multiple="multiple">
      <option value="Маникюр">Маникюр</option>
      <option value="Коррекция ногтей">Коррекция ногтей</option>
      <option value="Коррекция ногтей">Наращивание и укрепление ногтей</option>
      <option value="Депиляция">Депиляция</option>
      <option value="Наращивание ресниц">Наращивание ресниц</option>
      <option value="Перманентный макияж">Перманентный макияж</option>
      <option value="Химическая завивка ресниц">Химическая завивка ресниц</option>
      <option value="Оформление бровей">Оформление бровей</option>
      <option value="Покраска бровей">Покраска бровей</option>
      <option value="Покраска ресниц">Покраска ресниц</option>
      <option value="Коррекция вросших ногтей">Коррекция вросших ногтей</option>
      <option value="Макияж">Макияж</option>
    </select> 
    </div>
  </div>

  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-default" name="submit" id="submit">Записаться</button>
    </div>
  </div>

</form>

Обратите внимание! Я поле с селектом для которого допустим выбор нескольких пунктов именую service[], т.е. атрибут name равен значению service[]. Все дело в квадратных скобках на конце. Благодаря им все будет у нас ok!

3. Чанк thankyou:

<div class="alert alert-success">
<p>Вы выбрали следующие <strong>Услуги:</strong> [+service+]
</div>

4. Чанк report:

<p>Отправлено посетителем с помощью формы онлайн-записи. </p>
<p>Выбранные <b>Услуги:</b>[+service+]</p>
<p>Вы можете использовать эту ссылку для ответа: <a href="mailto:[+email+]?subject=RE:[+subject+]">[+email+]</a></p>
Опубликовано 21-02-2014 в 16:42


Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>











Свежие комментарии

  • krasnov8953: к записи Не работает как мне кажется строчка $newTvId = $ »
  • Dimanski: к записи ничего не понимаю. Ставлю ModX на хостинг r01.ru »
  • Дмитрий: к записи Спасибо! Очень выручили. С битриксом беда, а прав »
  • леонид: к записи как сделать что были в ряд? у меня получается по о »
  • Администратор: к записи Статический IP. »
  • Steel: к записи Администратор, вы данную проблему решили подключен »
  • Дмитрий: к записи Хотел узнать как прикрутить данное окно (http://re »

Blogroll:

  • Заказать печать флаеров в киеве в сборном тираже. →

Последние твиты