CODEWITHSUNDEEP
jqueryhtmlinput
Martijn
Martijn

Reputation: 529

Use jQuery to populate sibling hidden input

For a calculation with currencies, I need the value of an input to be parsed as an integer and this value should populate the sibling input of type "hidden".

I would like to make this as reusable as possible, to use the same script for all inputs like 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
What I tried: (Not doing anything at 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 the integerValue to all 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 to the solution, but I need a nodge in the right direction.

Upvotes: 0

Views: 1735

Answers (3)

Touqeer Shafi
Touqeer Shafi

Reputation: 5284

Well you can use .parent() method with find input[type="hidden"] in the current context:

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:

jQuery(document).ready(function($){
    $('.input-group input').on('keyup blur focusout',function() {
        if($(this).val() !== '') {
                    var inputValue = $(this).val();
                    var integerValue = parseInt(inputValue * 100);
                    $(this).parent().find('input[type="hidden"]').val(integerValue); // <-- Here find current object parent, then tell that parent to find it's child which is input hidden
        }
    })
});

You can check the working jsfiddle.

Tip: Inspect Element via Google Chrome Developer Tool to check value change of hidden field.

Upvotes: 0

Mitul
Mitul

Reputation: 3437

var inputValue,
integerValue;
$('.input-group input').on('keyup blur focusout',function() {
    if($(this).val() !== '') {
        inputValue = $(this).val();
        integerValue = parseInt(inputValue) * 100;
        $(this).siblings('input:hidden').val(integerValue);
    }
});

Upvotes: 0

Ahmed
Ahmed

Reputation: 525

Change this line

var integerValue = parseInt(inputValue * 100);

to

var integerValue = parseInt(inputValue) * 100;

Basically you parse inputValue first before multiplying

Also

  1. you missed ) at the end
  2. it would be much better if you declared your variables outside of the function, so that they won't be created every time the event fires

Your script would look like 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 your comment, You can use parseFloat() instead of parseInt().

Also you cannot multiply number by string in javascript. You have to parse before performing the mathematical operation.

Edit 2

This is your 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, this part of your script $('.input-group input'), selects every input in every .input-group, and you have 2 .input-group, so that's why you get both of your input:hidden selected.

To fix this, you can use $(this).

So basically change this line $('input:text').siblings('input:hidden').val(integerValue); to 

$(this).siblings('input:hidden').val(integerValue);

Here is the updated fiddle.

Upvotes: 1

Related Questions