What is the best way to hid part of a form based on the content of a drop down list?
If the drop down list would call back to the controller ever time it was edited I suppose I could set some flags and re-render the page differently. Is there any essay way to do this? Is there a better way to hid part of a form based on the content of a drop down list?
Wrap that part into a <fieldset> and use jQuery to toggle its visibility when the dropdown changes. Or if what you want is only at render time, you set its visibility value by css in PHP.
Do you know where I can find an example of this? I am not very familiar with jQuery. I need it to change every time the user changes the drop down list selection, so I think the css thing will not work. Thanks
Using jQuery change event, and toggle() or hide and show() methods, you’ll have something like this in your view (adapt accordingly to your test):
Yii::app()->clientScript->registerScript("someScript", "
$('#someFieldset').hide();
$('#ModelName_someAttribute').change(function() {
// Let's test that the value is not empty ie a value has been selected
$('#someFieldset').toggle($(this).val() != '');
});
");
<?php $form=$this->beginWidget('CActiveForm', array(
...
));
...
<?php echo $form->dropDownList($model,'someAttribute',
$someDataArray,
array('empty' => 'Select something')
); ?>
...
<fieldset id="someFieldset">
...
</fieldset>
...
<?php $this->endWidget(); ?>
I think I am not getting the (’#ModelName_someAttribute’) part correct I have a model that is just called ‘$model’ and the attribute is ‘question_type’, so I was trying (’#model_question_type’) and (’#question_type’), but they do not work. What am I doing wrong? In the end I want to hide when the drop down list value is ‘SHORT-ANSWER’ and show when it is ‘MULTIPLE-CHOICE’. Thanks
<div class="form">
<?php
Yii::app()->clientScript->registerScript("hidScript", "
$('#multiChoiceQuest').hide();
$('#model_question_type').change(function() {
$('#multiChoiceQuest').toggle($(this).val() != '');
});
");
?>
<?php $form=$this->beginWidget('CActiveForm', array(
'id'=>'question-form',
'enableAjaxValidation'=>false,
)); ?>
<p class="note">Fields with <span class="required">*</span> are required.</p>
<?php echo $form->errorSummary(array_merge(array($model),$validatedanswerChoices)); ?>
<div class="row">
<?php echo $form->labelEx($model,'question_type'); ?>
<?php echo $form->dropDownList($model,'question_type',array('SHORT-ANSWER'=>'Short Anwser', 'MULTIPLE-CHOICE'=>'Multible Choice' )); ?>
<?php echo $form->error($model,'question_type'); ?>
</div>
. . .
<fieldset id="multiChoiceQuest">
<?php
. . .
?>
</fieldset>
<div class="row buttons">
<?php echo CHtml::submitButton($model->isNewRecord ? 'Create' : 'Save'); ?>
</div>
<?php $this->endWidget(); ?>
</div><!-- form -->
ModelName refers to the model you are using in your view. It could be Question…
Anyway, if you don’t see what I mean, you can inspect the HTML output (or view source), and see the id assigned to the dropdown.
Or you can keep it dynamic and use CHtml::activeId helper like below.
Besides, from your view code, your test on the dropdown value is incorrect, I gave you an example that you should adapt for your case, like below.
<?php
Yii::app()->clientScript->registerScript("hidScript", "
$('#multiChoiceQuest').hide();
$('#" . CHtml::activeId($model, "question_type") . "').change(function() {
$('#multiChoiceQuest').toggle($(this).val() == 'MULTIPLE-CHOICE');
});
");
?>