[ricardograna]

I am asking this because I don't have so much knowledge about jQuery.

My form have a dropdownList with Yes/No options. If user select 'Yes', my form must show him a dependant textbox.

Reload the page is not a solution for me.

Please, gentleman, show me how can I do that!

[imehesz]

rickgrana, on 12 August 2009 - 08:15 AM, said:

I am asking this because I don't have so much knowledge about jQuery.

My form have a dropdownList with Yes/No options. If user select 'Yes', my form must show him a dependant textbox.

Reload the page is not a solution for me.

Please, gentleman, show me how can I do that!

well, there are multiple ways to do it. I'd just add something like this to my drop-down element.

<?= CHtml::formFieldType($model, 'fieldName', array( 'onChange' => 'javascript:yourExternalJsFunction()' ) ); ?>

and your 'yourExternalJsFunction' would display or generate your next drop-down,text,checkbox, etc field...

hope this helps.

--iM

[ricardograna]

Sorry, my topic is in the wrong place (Can some admin move this topic to General Discussion? Thx!)

imehez, thanks for your response. But, I was expecting something in jQuery mode. jQuery has something like js:$('mydiv').toggle()?

[fduch]

rickgrana, on 12 August 2009 - 09:39 AM, said:

Sorry, my topic is in the wrong place (Can some admin move this topic to General Discussion? Thx!)

imehez, thanks for your response. But, I was expecting something in jQuery mode. jQuery has something like js:$('mydiv').toggle()?

Yep (you should change selectors #mydiv and #dropdownlist to yours)

$(document).ready(function(){
  var droplist = $('#dropdownlist');
  droplist.change(function(e){
    if (droplist.val() == 'Yes') {
      $('#mydiv').show();
    }
    else {
      $('#mydiv').hide();
    }
  })
});

or this code can be simpler if initial option is "No":

$(document).ready(function(){
  var droplist = $('#dropdownlist');
  droplist.change(function(e){
    $('#mydiv').toggle();
  })
});

BTW. "best practice" to choose from 2 options (yes/no true/false) is checkbox.

[ricardograna]

I knew it!! Thank you fduch!! ^^

Last question: Where should I put these codes? Inside a <script> tag on my form?

Edit: SOLVED!!! It is working like a charm!!

[fduch]

rickgrana, on 12 August 2009 - 10:32 AM, said:

I knew it!! Thank you fduch!! ^^

Last question: Where should I put these codes? Inside a <script> tag on my form?

Anywhere at your page between <script></script> tags. Do not forget to change selectors!

[auxbuss]

Example with jQuery and Yii

<?= CHtml::checkBox('blah', false,
	array('id' => 'someid', 'onchange' => 'javascript:$("#someid").toggle()'
) ); ?>

[ricardograna]

Great!

Unfortunately, I had to use pure javascript (to avoid jQuery charge and reduce traffic). But, i will have to use it some time.

[DarkNSF]

this is what i get, which does not work:

<?php echo CHtml::radioButtonList('userType', 'id', array('Existing', 'New User'), array('onchange'=>'javascript:$("#userTypeForm").toggle();')); ?>

which produces

 <input onchange="javascript:$(&quot;#userTypeForm&quot;).toggle();" value="0" id="userType_0" type="radio" name="userType" />

is there any way to stop it from: turning " in to &quot;?

[PoL]

If i'm not wroong you must ise this way:

<?php echo CHtml::radioButtonList('userType', 'id', array('Existing', 'New User'), array('onchange'=>'js:$("#userTypeForm").toggle();')); ?>

Note the use of 'js' against 'javascript'.

[DarkNSF]

PoL, on 01 December 2009 - 06:48 AM, said:

If i'm not wroong you must ise this way:

<?php echo CHtml::radioButtonList('userType', 'id', array('Existing', 'New User'), array('onchange'=>'js:$("#userTypeForm").toggle();')); ?>

Note the use of 'js' against 'javascript'.

Thanks PoL, I'll give it a shot when I get home from work.

[kiran sharma]

I use display element on dropdown selection ,
I want to display another dropdown on selection of first one and I use following code .


step : 1 => code for view file

<div class="row">                                              //   first dropdown for selection
		<?php echo $form->labelEx($model,'E_ROLE'); ?>
		<?php echo $form->dropDownList($model,'E_ROLE',array(""=>"Select","Admin"=>"Admin","Employee"=>"Employee","TL"=>"TL"),array('onchange'=>'return muFun(this.value)')); ?>
		<?php echo $form->error($model,'E_ROLE'); ?>
	</div>
    
    
    <div id="TLID_DIV" style="display:none">                  //   hidden dropdown enable on selection first one
   		<div class="row">
		<?php echo $form->labelEx($model,'E_TLID'); ?>
	       <?php echo CHtml::activeDropDownList($model,'E_TLID', $model->getTL() , array('prompt'=>'Select') ); ?>
		<?php echo $form->error($model,'E_TLID'); ?>
		</div>    
    </div>

step : 2 => code for js

function muFun(obj){
		if(obj=="Employee"){
		document.getElementById('TLID_DIV').style.display="block"; 
		return false;
		}else{
		document.getElementById('TLID_DIV').style.display="none"; 
		return false;
		}
	}

[Maurizio Domba]

@Kiran Sharma

when posting code you can use the code button (<> on the editor toolbar)... so that your code is more readable... or use [ code] your code [ /code] directives (without spaces)

NOTE: you can edit your posts to add this codes...

[kiran sharma]

@mdomba , thankx.

[hav]

imehesz, on 12 August 2009 - 08:24 AM, said:

well, there are multiple ways to do it. I'd just add something like this to my drop-down element.

<?= CHtml::formFieldType($model, 'fieldName', array( 'onChange' => 'javascript:yourExternalJsFunction()' ) ); ?>

and your 'yourExternalJsFunction' would display or generate your next drop-down,text,checkbox, etc field...

hope this helps.

--iM

Sorry my English. I'm starting at Yii and I understand very little of js, I wonder if you have the rest of this solution. Missing yourExternalJsFunction how about it?

[conviera]

kiran sharma, on 06 June 2011 - 07:05 AM, said:

I use display element on dropdown selection ,
I want to display another dropdown on selection of first one and I use following code .


step : 1 => code for view file

<div class="row">                                              //   first dropdown for selection
		<?php echo $form->labelEx($model,'E_ROLE'); ?>
		<?php echo $form->dropDownList($model,'E_ROLE',array(""=>"Select","Admin"=>"Admin","Employee"=>"Employee","TL"=>"TL"),array('onchange'=>'return muFun(this.value)')); ?>
		<?php echo $form->error($model,'E_ROLE'); ?>
	</div>
    
    
    <div id="TLID_DIV" style="display:none">                  //   hidden dropdown enable on selection first one
   		<div class="row">
		<?php echo $form->labelEx($model,'E_TLID'); ?>
		   <?php echo CHtml::activeDropDownList($model,'E_TLID', $model->getTL() , array('prompt'=>'Select') ); ?>
		<?php echo $form->error($model,'E_TLID'); ?>
		</div>    
    </div>

step : 2 => code for js

function muFun(obj){
		if(obj=="Employee"){
		document.getElementById('TLID_DIV').style.display="block"; 
		return false;
		}else{
		document.getElementById('TLID_DIV').style.display="none"; 
		return false;
		}
	}

It works 100%
If helpful give user rating to my profile.

Hi All,
I am a newbie to yii and trying to hide and show form elements based on selection of an option from another field.

My form has a dropDownList with "-/Low/High " and I want to display a low field if low is selected, or a high field if high is selected.

This is my form

<td id="riskDropDownList">
<?php echo $form->labelEx($model,'patient_risk'); ?>
<?php echo ZHtml::enumDropDownList($model,'patient_risk',array('style'=>'width:262px;',)); ?>
<?php echo $form->error($model,'patient_risk'); ?>
</td>


<td class="lowRiskField">
<?php echo $form->labelEx($model,'if_risk_low_risk_factor'); ?>
<?php echo $form->dropDownList($model,'if_risk_low_risk_factor', $model->riskFactorArray()); ?>
<?php echo $form->error($model,'if_risk_low_risk_factor'); ?>
</td>

<td class="highRiskField">
<?php echo $form->labelEx($model,'if_risk_high_risk_factor'); ?>
<?php echo $form->dropDownList($model,'if_risk_high_risk_factor',$model->riskFactorArray()); ?>
<?php echo $form->error($model,'if_risk_high_risk_factor'); ?>
</td>

and this is my JQuery script

<script type="text/javascript">
$(document).ready(function(){

$("#riskDropDownList").change(function() {
if ($("#riskDropDownList").val() == 'Low')
{
$(".lowRiskField").show();
}

else if ($("#riskDropDownList").val() == 'High')
{
$(".highRiskField").show();
}
else
{
$(".lowRiskField").hide();
$(".highRiskField").hide();
}

});

$("#riskDropDownList").change();

});
</script>

Many thanks for your help in advance

[kiran sharma]

@converia,
yes the code looks fine,
why you had use $("#riskDropDownList").change() at the end of script..?

/*
This topic should be in proper section, I think its not related to Bug Discussion
Topic started before much time so i think current staff hasn't point out - which is quite obvious
*/