Changing value of input based on another input box and multiplied currency

Question

I am trying to set the value of an input box to be that of another input boxes' value times the price of an item. I have the currency wrapped in a span tag with a class. I need to multiply that value times the .productTextInput input text box. That value will show in the .subTotal box. How do I accomplish this?

jQuery:

$(".productTextInput").each(function() {
    $(this).change(function() {
        var priceAmount = $(this).parents().find(".priceAmount").text();

        $(this).parents().find(".subTotal").val(parseInt($(this).val(), 10) * parseInt(priceAmount, 10));
    });
});

html:

<table class="productTable productSmall" cellspacing="0">
    <tbody>
        <tr>
            <td style="width: 27%;">
               <strong>American (wild) plum</strong>
            </td>
            <td class="custom-tag"></td>
            <td class="custom-tag">
                Prunus americana
            </td>
            <td class="custom-tag">
                Bare Root
            </td>
            <td class="custom-tag" style="border-right: 2px solid #000;">
                2' - 3' size
            </td>
            <td style="text-align:right;padding-right: 10px;">
                $<span class="priceAmount">1.75</span>
            </td>
            <td class="quantity">
                <input id="Units_4996263" class="productTextInput" name="AddToCart_Amount" value="1" type="text">
            </td>
            <td>
                <input class="subTotal" name="subTotal" readonly="readonly" type="text">
            </td>
       </tr>
   </tbody>
</table>

This isnt the full answer to your question, but you aren't closing your input tags. It should be `` <-- missing space and `/` — wahwahwah, Jan 08 '15 at 20:56
@wahwahwah That doesn't actually affect anything if you don't. Good advice, as it's best to be consistent syntax wise, but the HTML will render without errors if they're missing. See http://stackoverflow.com/questions/13232121/closing-html-input-tag-issue to better understand. — Tim Lewis, Jan 08 '15 at 20:58
@wahwahwah This is due to the input being generated by the system via a tag. I didn't include the tag as it wouldn't make sense. Thanks for the heads up though. — Phorden, Jan 08 '15 at 20:59

Mouser · Answer 1 · 2015-01-08T21:04:14.937

2

Use parseFloat on priceAmount. parseInt returns an integer (strips the decimals). parseFloat keeps the decimals.

In your current code priceAmount is always 1 due to the parseInt.

Change to:

$(this).parents().find(".subTotal").val(parseInt($(this).val(), 10) * parseFloat(priceAmount));

edited Jan 08 '15 at 21:04

answered Jan 08 '15 at 20:54

Mouser

13,132
3
28
54

jmore009 · Accepted Answer · 2015-01-08T21:06:47.300

1

you should be using parseFloat instead of parseInt if you want to a number with decimals.

Also you should remove the each function you're calling:

$(".productTextInput").each(function() {
   $(this).change(function() {

Just use a click function and $(this) will refer to the clicked element. You can simplify your code to the following:

$(".productTextInput").change(function() {

     var priceAmount = parseFloat($(this).closest("tr").find(".priceAmount").text());

     $(this).closest("tr").find(".subTotal").val(parseInt($(this).val()) * priceAmount)  

});

FIDDLE

edited Jan 08 '15 at 21:06

answered Jan 08 '15 at 21:01

jmore009

12,863
1
19
34

What if the OP is building a webshop and there are multiple product inputs? `Each` provides each of those inputs with a change handler. – Mouser Jan 08 '15 at 21:06
right and assuming they're in their own table row, this will do just that. An `each` loop is not necessary if you specify your targets right: [EXAMPLE](http://jsfiddle.net/kprhtovh/1/) – jmore009 Jan 08 '15 at 21:08
I have chosen this answer because it is correct and I like the approach to it. Thanks! – Phorden Jan 08 '15 at 21:10

score 1 · Answer 3 · answered Jan 08 '15 at 21:10

You don't need to use .each on this since $('.productTextInput') looks for every element with the supplied class.

I did omit parseInt/parseFloat in the snippet but the JSFiddle has it. http://jsfiddle.net/6qf7oc55/3/

$('.productTextInput').blur(function() {
    num = this.value;
    price = $(this).closest('tr').find('.priceAmount').text();
    sub = num * price;
    $('.subTotal').val(sub.toFixed(2));
});

Changing value of input based on another input box and multiplied currency

3 Answers3

FIDDLE