html - Use jQuery to populate sibling hidden input -
for calculation currencies, need value of input parsed integer , value should populate sibling input of type "hidden".
i make reusable possible, use same script inputs it.
html:
<div class="input-group" id="total-emplcosts"> <span class="input-group-addon">total employer costs</span> <input type="text" class="form-control" name="empl_costs_inp" id="empl_costs_inp" /> <input type="hidden" name="empl_costs" id="empl_costs" /> </div>
jquery
tried: (not doing @ all)
$('.input-group input').on('keyup blur focusout',function() { if($(this).val() !== '') { var inputvalue = $(this).val(); var integervalue = parseint(inputvalue * 100); $('input').siblings('input').val(integervalue); } }
and: (adding integervalue hidden inputs)
$('.input-group input').on('keyup blur focusout',function() { if($(this).val() !== '') { var inputvalue = $(this).val(); var integervalue = parseint(inputvalue * 100); $('input').next('input[type=hidden]').val(integervalue); } }
i think i'm quite close solution, need nodge in right direction.
change line
var integervalue = parseint(inputvalue * 100);
to
var integervalue = parseint(inputvalue) * 100;
basically parse inputvalue
first before multiplying
also
- you missed
)
@ end - it better if declared variables outside of function, won't created every time event fires
your script this
var inputvalue, integervalue; $('.input-group input').on('keyup blur focusout',function() { if($(this).val() !== '') { inputvalue = $(this).val(); integervalue = parseint(inputvalue) * 100; $('input:text').siblings('input:hidden').val(integervalue); } });
regarding comment, can use
parsefloat()
instead of parseint()
. also cannot multiply number
string
in javascript. have parse before performing mathematical operation.
edit 2
this html
<div class="input-group" id="rate"> <span class="input-group-addon">rate per day/hour</span> <input type="text" class="form-control" name="rate_inp" id="calc_rate_inp" /> <input type="hidden" name="rate" id="calc_rate" /> </div> <div class="input-group" id="bill-costs"> <span class="input-group-addon">billable costs</span> <input type="text" class="form-control" name="bill_costs_inp" id="bill_costs_inp" /> <input type="hidden" name="bill_costs" id="bill_costs" /> </div>
now, part of script $('.input-group input')
, selects every input
in every .input-group
, , have 2 .input-group
, that's why both of input:hidden
selected.
to fix this, can use $(this)
.
so change line $('input:text').siblings('input:hidden').val(integervalue);
$(this).siblings('input:hidden').val(integervalue);
here updated fiddle.
Comments
Post a Comment