Calculate price from quantity input box in jQuery

Question

I'm having a small issue calculating price from Quantity in jQuery. Those are the input boxes i have.

Quantity: <input type="text" style="width: 50px;" name="quantity" id="quantity" class="txt" value="1" />

Price: <input type="text" style="width: 50px;" name="item_price" id="item_price" class="txt" value="2990" />

Total Price: <input type="text" style="width: 50px;" name="total_price" id="total_price" class="txt" value="" />

None. Unless you explain what you want to achieve. Should it be based from the user input? from the hardcoded value in your input fields? Should that happen when page is loaded? On the fly? ... — MrUpsidown, Oct 04 '12 at 13:15

Darren · Answer 1 · 2012-10-04T14:07:56.350

5

I am assuming you want the formulae or how to get the values of the input elements:

var quantity = $("#quantity").val();
var iPrice = $("#item_price").val();

var total = quantity * iPrice;

$("#total_price").val(total); // sets the total price input to the quantity * price

alert(total);

Edit for Keyup:

$('#quantity').keyup(function() {
   var quantity = $("#quantity").val();
   var iPrice = $("#item_price").val();

   var total = quantity * iPrice;

   $("#total_price").val(total); // sets the total price input to the quantity * price
});

edited Oct 04 '12 at 14:07

answered Oct 04 '12 at 13:16

Darren

68,902
24
138
144

This works but no live/keyup when i change the quantity, any idea ? – Jack Johnson Oct 04 '12 at 13:59
@HafsteinnMárMásson included a keyup example for when quantity is changed. Hope this helps. – Darren Oct 04 '12 at 14:08
Thanks, but now the price won't appear unless i make a change in the quantity field, any quick fix for that ? – Jack Johnson Oct 04 '12 at 14:21
@HafsteinnMárMásson the price should appear on page load. Check out: http://jsfiddle.net/WXyNw/ – Darren Oct 04 '12 at 14:30
@HafsteinnMárMásson if you wanted it to change live when the price is changed you need an event handler to handle this too, you could copy the keyup function I created for you and change "#quantity" to "#item_price" – Darren Oct 04 '12 at 14:32

score 2 · Answer 2 · edited May 23 '17 at 12:12

updated to show full example in script tags

If you want the formula and how you can "see" the change:

<script type="text/javascript">
    $(function() {  //  In jQuery 1.6+ this is same as $(document).ready(function(){})
        $('#quantity, #item_price')  //  jQuery CSS selector grabs elements with the ID's "quantity" & "item_price"
            .on('change', function(e) {  //  jQuery 1.6+ replcement for .live (dynamically asigns event, see jQuery API)
            //  in this case, our event is "change" which works on inputs and selects to let us know when a value is changed
                //  below i use inline if statements to assure the values i get are "Real"
                var quan = $("#quantity").val() != "" ? parseFloat($("#quantity").val()) : 1,  //  Get quantity value
                    pric = $("#item_price").val() != "" ? parseFloat($("#item_price").val()) : 0;  //  Get price value
                $('#total_price').val(pric*quan); // show total
            });
    });
</script>

acutally this use of `.on` isn't the replacement for live.. you have to use the delegating version which is `$(staticparent).on('events','elements',function()` — wirey00, Oct 04 '12 at 14:20

Calculate price from quantity input box in jQuery

2 Answers2