textFieldRow prepend

How to automatically set the prepend text with a selected value from the following

In the code below I select a currency type.


                 // <!-- Currency Type -->

                      // <!-- =========================================================== -->







                      'attribute' => 'Currency',

                      'data' =>  TbHtml::listData(TblCurrency::model()->findAll(),'currency_code','currency'),

                      'options' => array(

                        'placeholder' => 'Click to Select a Currency Type',

                        'width' => '30%',



              ); ?>

automatically the append attribute should change


                  echo $form->textFieldRow(





                     'labelOptions' => array('label' => false),






how can I do that? :( ==> I think it has to do with Javascript but don’t know how to retrieve the value from the widget selection

This should work:

$(’#TbSelect2InputID’).on(‘change’, function () {

 var prependValue = &#036;(this).val();



Still I’m not sure that I have understood right what U want to do.

Thanks Dragan, where did you set the id = TbSelect2InputID?

What I want to do is, I have a drop down list where the user selects currency, and once the user selects the currency, the prepend value should take the value of the selected currency

e.g if I select euro as my currency then automatically the prepend value of the next text box where i enter the price should change to EUR________.00

if I select USD as my currency then automatically the prepend value of the next text box where i enter the price should change to USD________.00

if I’m right U can send in TbSelect2 config htmlOptions where U can define ID, but I think that by default #ID = ModelName_attribute.

In order to do what U want:

$(’#TbSelect2InputID’).on(‘change’, function () {

 var prependValue = &#036;(this).val();





Thanks Dragan again!! i am actually close to the solution, i can handle the change event, but can’t set the prepend value, here is my code


$ (document).ready(function()


// alert($('#Vessel_Price_p_week').prepend.val());

// alert (document.getElementById("Vessel_Currency").value);

$( "#Vessel_Currency" ).change(



                var prependValue = $(this).val();


                // $('#Vessel_Price_p_week').prepend=prependValue;

              // alert ($(this).val());



// var prependValue = $(this).val();

// $('#Vessel_Price_p_week').val(prependValue);

// })



the following is the HTML

<div class="control-group"><div class="controls"><div class="input-prepend input-append"><span class="add-on">EUR</span><input size="10" maxlength="45" id="PriceInputID" placeholder="Price" name="Vessel[Price]" type="text" /><span class="add-on">.00</span></div></div></div> 

If I got this right U wan to change :

<span class="add-on">EUR</span> with selected value from select2 ?

Yes Correct!!

I actually replaced the widget with plain html and applied a div there… and now it works… BUT!! I want to know how can I get it working with the "form->textFieldRow(" widget

Main issue here is how to select html element that should be changed. Since U have ID for input field (PriceInputID), U can do something like:

$( "#Vessel_Currency" ).change(



     var prependValue = &#036;(this).val();

      var prependElement =