[Solved] Yiistrap - Textfieldcontrolgroup Prepend & Append

Hi Chris,

I’ve switched to YiiStrap from Bootstrap and so far so good.

I’m using textFieldControlGroup with both a prepend and a append option.

<div id="institution_fee_indicator" >

		<?php echo $form->textFieldControlGroup($model,'institution_fee',array('class'=>'currency', 'prepend'=>'R', 'append'=>'%')); ?>


I would like to use JavaScript to show and hide the prepend value and append value based on a selection in a radio button group. The JS is the easy part. The problem is that I cannot find a way to uniquely identify the prepend and append values since both have exactly the same class

<span class="add-on">R</span>


Looking through the API code, I see that it is possible to pass HTML options to a prepend and append. Can this be done when using it in a textFieldControlGroup? If it can, how to do it? I’m thinking of setting an id tag.

Thanks for all the hard work.


The beauty of using Yii, YiiStrap and YiiWheels is of course that we have access to the API code. Working through that I figured out how to solve my problem.

The intention was to have a radio button with two options (‘P’ for percentage and ‘R’ for South African Rand) as well as a textFieldControlGroup that displays either a ‘R’ as a prepend or a ‘%’ as a append depending on what is chosen in the RadioButtonList.

The trick is to call some JavaScript in the onChange event of the inlineRadioButtonListControlGroup. That’s easy enough. I also check the value of the RadioButtonList on the document load so I can hide the prepend or append value appropriately in the case where the data is being edited when loading a record from the model.

I then set up the textFieldControlGroup to have a prepend value of ‘R’ AND a append value of ‘%’. The idea is then to show the one and hide the other based on the choice of the radio buttonlist. What I struggled with is to figure our how to set a unique id for the prepend and append portion of the textFieldControlGroup. Once I figured that out it all fell into place quite easily.

The code for the RadioButton list and the currency textFieldControlGroup.

		<?php echo $form->inlineRadioButtonListControlGroup($model,'institution_fee_type', $model->getRateTypeOptions(), array('onchange' => 'RateTypeChange(this.value, "institution_fee");')); ?>

		<?php echo $form->textFieldControlGroup($model,'institution_fee',array('class'=>'currency', 'prepend'=>'R', 'prependOptions'=>array('addOnOptions'=>array('id'=>'institution_fee_prepend')),'append'=>'%',  'appendOptions'=>array('addOnOptions'=>array('id'=>'institution_fee_append')))); ?>

Here’s the JavaScript I used to manage hiding and showing the R and % values.

	$script = "$(document).ready(function()



							var RateType = $('input[name=\'Event[institution_fee_type]\']:checked').val();

							RateTypeChange(RateType, 'institution_fee');





			function RateTypeChange(RateType, id)



				if(RateType=='P') {




				} else if(RateType=='R') {






			" ;

	Yii::app()->clientScript->registerScript('updates', $script, CClientScript::POS_END);