jQuery - Get the value of closest textbox and assign it into a variable

Question

How can I get the value of the closest textbox and assign it into a variable? Then after getting the value, change the current value of that textbox by multiplying it by the value of previous textbox. I have three instances of divs with the same input elements so I think .closest() or .next() can help me. Here is a snippet of my code

HTML

<div class="box">
    <b>1</b>
    <input type="text" name="quantity" value="1"/>
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/>
    <input type="text" name="price" value="10"/>
</div>

<div class="box">
    <b>2</b>
    <input type="text" name="quantity" value="1"/>
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/>
    <input type="text" name="price" value="10"/>
</div>

<div class="box">
    <b>3</b>
    <input type="text" name="quantity" value="1"/>
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/>
    <input type="text" name="price" value="10"/>
</div>

JS

$("input[name=quantity]").each(function(){
    $(this).bind("change keyup", function(){
        var q = $(this).val();
        var p = parseFloat($(this).closest("input[name=price]").val()).toFixed(2);
        var amount = q * p;
        $(this).closest("input[name=price]").val(amount)
        console.log(amount);
    })
})

non working demo

http://jsfiddle.net/c6yfS/

Thank you for responses

/* NOTE */

The purpose of the checkbox is just to show that I have a checkbox in between the two elements concerned.

Answer 1

it's better to use data attribute in order to calculating correctly:

HTML:

<div class="box">
    <b>1</b>
    <input type="text" name="quantity" value="1"/>
    <input type="checkbox" name="ignoreThisCheckbox" checked="checked"/>
    <input type="text" name="price" data-value="10"/>
</div>

JS:

$('input[name=quantity]').on("change keyup", function(){
        var q = 0;
        var p = 0;
        var amount = 0;
        q = parseInt($(this).val(), 10);
        p = parseInt($(this).siblings("input[name='price']").data('value'), 10);
        amount = q * p;
        if (amount) {
          $(this).siblings("input[name='price']").val(amount)
        console.log(amount);
        } else {
          $(this).siblings("input[name='price']").val('Please specify the quantity')        
        }
})

DEMO

Answer 2

As mentioned by other posters, you can use .siblings as .closest searches up the DOM tree (ie parent elements). However there is also a logic error in your code as the price you retrieve is never the right per unit price if quantity is changed. You will need a separate unit price hidden value perhaps to facilitate this

Check out the updated code here: http://jsfiddle.net/c6yfS/1/

Answer 3

.closest is used to find the closest element up the DOM tree. What you are looking for is siblings or next | prev .

http://api.jquery.com/siblings/

http://api.jquery.com/prev/

http://api.jquery.com/next/

So

$(this).siblings("input[name='price']").val(amount);

Edit

Here is the full working JS:

$("input[name=quantity]").each(function(){
    $(this).bind("change keyup", function(){
        var $thi,q,$p,p;
        $thi = $(this);
        q = $thi.val();
        $p = $(this).siblings("input[name='price']");
        p = parseFloat($p.val()).toFixed(2);
        $p.val(q * p);
    });
});

Answer 4

for clarity I've just add a total field You can solve it with this code :

$("input[name=quantity], input[name=price]") .each( function(){ $(this).on( {'keyup': function(){ var j0=$(this).nextAll("input[name=total]"); j0.val( j0.prevAll("input[name=quantity]").val() * j0.prevAll("input[name=price]").val() ) } } ) } );

Click here to see the working "Fiddle"