Calculate price from quantity input box in jQuery

javascript jquery html input

11,232

Solution 1

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

Solution 2

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>

11,232

Author by

Jack Johnson

Updated on June 14, 2022

Comments

Jack Johnson almost 2 years

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="" />

iamserious over 11 years

This is how I'd do it. You need to add the above in a <Script type="text/javascript"> just above your </body> section.. Just in case it is not obvious to OP
Jack Johnson over 11 years

This works but no live/keyup when i change the quantity, any idea ?
Darren over 11 years

@HafsteinnMárMásson included a keyup example for when quantity is changed. Hope this helps.
wirey00 over 11 years

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()
Jack Johnson over 11 years

Thanks, but now the price won't appear unless i make a change in the quantity field, any quick fix for that ?
Darren over 11 years

@HafsteinnMárMásson the price should appear on page load. Check out: jsfiddle.net/WXyNw
Darren over 11 years

@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"