Sachy
(Sachin Mandalia)
October 22, 2014, 10:09am
1
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.
Sachy
(Sachin Mandalia)
October 23, 2014, 9:06am
3
dragan.zivkovic:
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);
})
Sachy
(Sachin Mandalia)
October 23, 2014, 9:42am
5
dragan.zivkovic:
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>
Sachy
(Sachin Mandalia)
October 23, 2014, 9:55am
6
Sachy:
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 ?
Sachy
(Sachin Mandalia)
October 23, 2014, 11:30am
8
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);
});