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

  1. you missed ) @ end
  2. 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

Popular posts from this blog

javascript - Slick Slider width recalculation -

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

angular2 services - Angular 2 RC 4 Http post not firing -