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.

 <?php

                 // <!-- Currency Type -->

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


                   $this->widget(

                    'bootstrap.widgets.TbSelect2',

                    array(

                

                      'model'=>$model,

              

                      '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

<?php


                  echo $form->textFieldRow(

                    $model,

                    'Price',


                    array('size'=>10,'maxlength'=>45),

                    array(

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

                     'append'=>'.00',

                     'prepend'=>'EUR'

                     )

                    ); 

                    ?>

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 = $(this).val();


 $('#PriceInputID').val(prependValue);

})

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 = $(this).val();


 $('#PriceInputID').empty();


 $('#PriceInputID').append('0.00');


 $('#PriceInputID').prepend(prependValue);

})

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

<script>

$ (document).ready(function()

{


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


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

$( "#Vessel_Currency" ).change(

               function() 

              {

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

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

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

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

              }


        );


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

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

// })


});




</script>

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(

function()

  {


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





      var prependElement =       


      $('#PriceInputID').parents('div:first').children('span:first');


      prependElement.text(prependValue);


  });