RSS-подписка

RSS-лента

Новые статьи

Последние комментарии


Получать обновления на эл. почту

Ваш e-mail:

Рассылка новостей от Loco

Yii: Динамическое появление полей на форме в зависимости от значения другого поля.

Yii: Динамическое появление полей на форме в зависимости от значения другого поля. Понадобилось реализовать такую штуку. Пользователь заполняет форму регистрации на мероприятие. Если он выбирает дисциплину "брейк данс", то форма остаётся как есть изначально, но если выбирает "граффити", то должно появиться поле для загрузки изображений (фотографий своих работ). Загрузка множественная, ограничение - загрузить можно максимум 6 фото.

Всё очень просто.

Динамические поля на форме Yii в зависимости от значения одного поля появляется другое поле

Вставляем на форму поле загрузки изображений

<div class="row box" style="display: none;" id="attachments">
<?php echo $form->labelEx($model,'attachments'); ?>
<?php  $this->widget('CMultiFileUpload',
array(
      'model'=>$model,
      'attribute' => 'attachments',
      'accept'=> 'jpg,jpeg,gif,png,doc,docx,pdf,txt',
      'denied'=>'Разрешаем аттачить только форматы: jpg,jpeg,gif,png,doc,docx,pdf,txt', 
      'max'=>6,
      'remove'=>'[x]',
      'duplicate'=>'Вы уже прикрепили файл с таким именем',
      )
);?>
<?php echo $form->error($model,'attachments'); ?>
<div class="hint">Не больше 6-х вложений.</div>

</div>

прописав у блока стиль display:none, чтобы по-умолчанию это поле было скрыто.

Сразу не забываем прописать в свойства виджета формы

'htmlOptions'=>array('enctype'=>'multipart/form-data'),

Дальше в поле выбора дисциплины добавим onchange

<div class="row">
<?php     echo $form->labelEx($model,'discipline_id'); ?> 
<?php     echo $form->dropDownList($model,'discipline_id',Lookup::items('Discipline', $model->codes), array('onchange'=>'_actAttach(this.value);')); ?>
<?php     echo $form->error($model,'discipline_id'); ?>
</div>

Скриптом тут же вставим эту функцию

<script>
    function _actAttach(value) { 
        if (value) {
            if (value == '2') {
                jQuery('#attachments').show(); // граффити
            } else {
                jQuery('#attachments').hide();
            }
        } else {
            jQuery('#attachments').hide(); 
        }           
     }
</script>

Значение value == 2 соответствует выборц дисциплины "граффити".

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

Значит добавим вызов нашей функции не только при событии onchange поля формы, но и после загрузки страницы, и передадим туда текущее значение нашего поля. Его идентификатор смотрим в форме, или можно задать ему класс и по классу его идентифицировать.

<script>
jQuery(function($){
   _actAttach(jQuery('#Maya_discipline_id').val());
});
</script>

 

 

 

Источник: loco.ru

almix
Разработчик Loco, автор статей по веб-разработке на Yii, CodeIgniter, MODx и прочих инструментах. Создатель Team Sense.

Вы можете почитать все статьи от almix'а.



Другие статьи по этой теме:
Комментарии (0)     Подпишитесь на RSS комментариев к этой статье.

Leave a Comment

Fields with * are required.

Картинка с кодом валидации
Пожалуйста введите символы с картинки. Регистр букв неважен.