go top


  • Colection of 65 PHP scripts for $4.29 each

Get 65 PHP scripts in a bundle for $4.29 each!

View Offer

Price Calculation Based On Quantity

Tuesday, 28th June, 2016  /  Javascript Tutorials  /  3 Comments
In this tutorial you will learn how to use JavaScript to calculate total price based on quantity selected for different items. You can see a demo here.

First, we will create our items. For each item that we create in our table, we will add a quantity text box:

<input name="qnt_1" type="text" id="qnt_1" value="0" size="3" data-price="100">

We name each field qnt_ID where ID starts from 1. When you create the items, make sure to use consecutive IDs as their names are used in the JavaScript function to sum all values. In our example, we created 4 items, each with a different price which is set in the data-price attribute for the corresponding quantity text field. Default values are set to 0 so no items are selected.

Then we created a JS function, CalculateItemsValue(), which checks the values for all quantity fields and sums them

function CalculateItemsValue() {
var total = 0;
for (i=1; i<=total_items; i++) {

itemID = document.getElementById("qnt_"+i);
if (typeof itemID === 'undefined' || itemID === null) {
alert("No such item - " + "qnt_"+i);
} else {
total = total + parseInt(itemID.value) * parseInt(itemID.getAttribute("data-price"));

document.getElementById("ItemsTotal").innerHTML = "$" + total;


We also define a variable for the total number of items that we have:

var total_items = 4;

Now what has left to be done is to add an onkeyup event to each of the quantity boxes. So when a key is pressed and released the CalculateItemsValue() JS function is executed, and the total price is calculated based on quantity selected for each of the items.

There is a div container with ID ItemsTotal where total value is printed using document.getElementById("ItemsTotal").innerHTML.

<div id="ItemsTotal">$0</div>

You can check how this works here and download the demo page here.

If you need to add new item to the table, follow these steps:

1) Add a new row to the table
<td>Item E</td>
<td><input name="qnt_5" type="text" id="qnt_5" value="0" size="3" data-price="99" onkeyup="CalculateItemsValue()" /></td>
It will be qnt_5 and price will be 99

2) Change JS variable total_items to 5
var total_items = 5;

3) That's all!

If you have any questions or suggestions about this "Price Calculation Based On Quantity" tutorial, please use the comments form below! Thank you!
Share on:

3 Comments to "Price Calculation Based On Quantity"

Jennifer Hill

Jennifer Hill / November 25, 2018 at 22:31 pm

Hi I was just wondering if I wanted to leave the price part open for varying prices, what would be the code for that?
Thank you


Dany / November 23, 2018 at 16:39 pm

Just what I was looking for / the code is light and easy to twist for any project
Thank you


Dominic / June 16, 2018 at 21:03 pm

Hi, Been looking @ this tutorial and am really not getting to understand it. Am new to programming, and i have a task similar to this. can throw more light to how to get this app to work in JS?? does it have to work with html?? can it stand alone and run perfectly?? if yes, how???

Add your comment


    Please, be polite and helpful and do not spam or offend others! We promise you will be treated the same way!

    Log in to your account to post your comments. If you still haven't joined our community yet, you can create your FREE account now!

    Posting tip:
    If you use code in your comments, please put it in these tags [php], [sql], [css], [js] PHP code example: [php] echo date("Y-m-d"); [/php]

    Thank you,
    PHPJabbers Team

    Free Scripts

    Add great new functionalities to your website with our Free Scripts collection.

    Free scripts

    PHP Scripts

    Check our extensive collection of top-notch PHP Scripts that will enhance your website!

    Commercial PHP scripts