Hiding and showing Fields

I haven’t been able to find a clear answer to this question but I have a feeling it’s probably obvious and has been answered already (I just can’t seem to find it).

I have a situation where I’m using an activeRadioButtonList that has Yes/No for the answers. Based on the user’s selection I want to have an activeTextfield associated with the same form appear or disappear. I’ve done this in the past with “regular” JavaScript for sites before by just changing the class of a surrounding div tag using the onChange event. I can’t seem to figure out how to do this with Yii. Specifically I am unable how to point an activeRadioButtonList to a JavaScript function. I’ve seen similar examples using Ajax but can only seem to find examples of ajax that replace all the content of a given element and in this case I simply want to change the class of a given element. I realize this is a pretty simple thing so I apologize if someone has answered this already. I just haven’t been able to find this information everywhere.

If you have been doing with js functions, then this one is going to be easy for you. There a couple of ways to do it but the easiest one is by using the ‘onclick’ on its htmlOptions.

If you are using CActiveForm then you will realize by looking at the code that IDs are set in this way: MODELNAME_attribute. Therefore, and taking that into account, imagine that I want to show/hide an activeField that displays the attribute ‘myproperty’ of the model ‘MYMODEL’.

CHtml::activeCheckBox($model, 'attributeofthemodelforcheckbox',array('onclick'=>'$(this).is(":checked")?$("#MYMODEL_myproperty").hide():$("#MYMODEL_myproperty").show();'));

Thanks, works great and also helped me find some other JavaScript info as well. :)

Glad it helped

I have a similar problem, but using ajax, and not knowing javascript.



    $form = $this->beginWidget('CActiveForm', array(

                'id' => 'lifecare-form',

                'enableAjaxValidation' => true,

                'clientOptions' => array('validateOnSubmit' => true, 'validateOnChange' => true),

                'focus' => array($model, 'product_code'),


Then an Ajax dropdown onchange


        echo $form->dropDownList($model, 'debit_payment_method_id', CHtml::listData(PaymentMethod::model()->findAll(), 'payment_method_id', 'payment_method_name')

        , array('ajax' => array(

        'type' => 'POST',

        'url' => CController::createUrl('lifecare/HideStopORDebitOrder'),

        'update' => '#debitOrderDetails' ,

        'data' => array('debit_payment_method_id' => 'js:this.value')



<?php echo $form->error($model, 'debit_payment_method_id'); ?>

And a div debitOrderDetails with many fields:

    <div id="debitOrderDetails" class="row">


        <legend>Payment Details (Debit Order)</legend>


        <div class="column">

            <?php echo $form->labelEx($model, 'debit_AccountHolderTitle'); ?>

            <?php echo $form->dropDownList($model, 'debit_AccountHolderTitle', CHtml::listData(Title::model()->findAll(), 'title_id', 'title_name'), array('empty' => '----')); ?>

            <?php echo $form->error($model, 'debit_AccountHolderTitle'); ?>


        <div class="column">

            <?php echo $form->labelEx($model, 'debit_AccountHolderFirstName'); ?>

            <?php echo $form->textField($model, 'debit_AccountHolderFirstName', array('size' => 30, 'maxlength' => 30)); ?>

            <?php echo $form->error($model, 'debit_AccountHolderFirstName'); ?>




Problem is, I have a method in the controller, but do not know how to toggle the

class="row hide" on the debitOrderDetails div

I have also set the access rules for actionHideStopORDebitOrder,

if I dont hide the row in the div, the ajax prints the echo from the controller, so I know the ajax call works.

What do I put in the controller method and update call in the ajax to hide the debitOrderDetails div?

All I want to do is if in the dropdown "Debit Order" is selected,

the debit order div must display, and if "Stop Order" is selected,

the stop order fields must be displayed.


public function actionHideStopORDebitOrder() {

        echo "row hide";



Any help will be much appreciated, I have spent hours and read almost the whole internet… :blink:

For your approach to work, change the ajax ‘update’ to

'success' => 'function(retval){jQuery("#debitOrderDetails").attr("class",retval);}',

(should make the ajax part work)


Thanks you Tommy, it works!

Another similar problem is giving me a headache. I am trying to set some content into the ‘holder’ container via Ajax (working fine) and also to display the ‘lobs’ container if the option chosen in the ‘holdertype’ dropdown is not empty.

It shows OK but it does not hide back if I select the empty option. I have tried is.(’:empty) and length==0 without success. Any suggestions? Thanks in advance


echo CHtml::dropDownList(‘holdertype’, ‘’, $holderoptions,


        'ajax' =&gt; array(









<div id="holder">this is the holder container</div>

<div id="lobs" style="display: none;">this is the lobs container</div>

I have a checkbox and text field & not knowing about javascript yet, especially in yii:


            <td><?php echo $form->labelEx($model, 'tbo_sk'); ?></td>

            <td><?php echo $form->checkBox($model, 'tbo_sk'); ?></td>

            <td><?php echo $form->error($model, 'tbo_sk'); ?></td>



            <td><?php echo $form->labelEx($model, 'nilaiblksk'); ?></td>

            <td><?php echo $form->textField($model, 'nilaiblksk'); ?></td>

            <td><?php echo $form->error($model, 'nilaiblksk'); ?></td>


how do we hide the textField ‘nilaiblksk’ using ‘tbo_sk’ checkbox?