CODEWITHSUNDEEP
javascriptjqueryhtml
fart-y-goer
fart-y-goer

Reputation: 739

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

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.

Upvotes: 0

Views: 9172

Answers (4)

ZEE
ZEE

Reputation: 3193

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"

Upvotes: 0

Ram
Ram

Reputation: 144699

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

Upvotes: 2

marteljn
marteljn

Reputation: 6516

.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);
    });
});

Upvotes: 1

thewheat
thewheat

Reputation: 988

As mentioned by other posters, you can use .siblings as .closest searches up the DOM tree (i.e. 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/

Upvotes: 2

Related Questions