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

admin管理员组

文章数量:1336402

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

/

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.

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/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.

• javascript
• jquery
• html

Share Follow edited Jun 22, 2012 at 1:32 fart-y-goer asked Jun 22, 2012 at 1:12 fart-y-goerfart-y-goer 73933 gold badges88 silver badges2727 bronze badges 2

• The .closest() method begins its search with the element itself before progressing up the DOM tree. To get the value of other element you might need to use .next() or .prev(). You can also try this but I am not sure var p = parseFloat($(this).closest("input[name=price]").closest("input[name=price]").val()).toFixed(2); – Bishnu Paudel Commented Jun 22, 2012 at 1:22
• I tried your snippet and it still giving me NaN result – fart-y-goer Commented Jun 22, 2012 at 1:27

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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/c6yfS/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

.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./siblings/

http://api.jquery./prev/

http://api.jquery./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);
    });
});

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"

本文标签： javascriptjQueryGet the value of closest textbox and assign it into a variableStack Overflow