CODEWITHSUNDEEP
javascriptjqueryhtmlinput
Jack Johnson
Jack Johnson

Reputation: 611

Calculate price from quantity input box in jQuery

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

Upvotes: 2

Views: 12926

Answers (2)

Darren
Darren

Reputation: 70718

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

Upvotes: 5

SpYk3HH
SpYk3HH

Reputation: 22570

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>

Upvotes: 2

Related Questions