Discount and Tax Calculator in JS using jQuery Tutorial

Introduction

In this tutorial, we will tackle How to Calculate the Discount and Tax Amount for your sales transaction feature in your web applications using JavaScript and jQuery Library. This tutorial aims to give IT/CS students or new programmers a reference or guide to learn some new ways or techniques for their future projects.

As we know, sales transactions/cashiering apps/POS are one of the most important features or processes needed for business software or application. These features include the list of products and the total summary which commonly contains discount and tax data along with grand total computation. Using JavaScript and jQuery, you can calculate both discount and tax amount from the sub-total and percentage entered which also makes your software or application more interactive and gives you users a better experience of using the software.

What is jQuery?

jQuery is a JavaScript Library that is fast, compact, and feature-rich. It greatly simplifies tasks like traversing and manipulating HTML documents, handling events, creating animations, and using Ajax thanks to an intuitive API that is compatible with a wide range of browsers.

How to Calculate Discount and Tax Amount using jQuery?

Now, I will show the best way I can think of for calculating the Discount and Tax amount using jQuery. Here I will be providing a snippet that outputs a simple web application that demonstrates our main goal for this tutorial.

Here's the sample snippet that can be found on the source code. It contains the computation process and the formula used to get the result we need for our app.

  1. var perc = $(this).val()
  2. perc = perc > 0 ? perc : 0;
  3.  
  4. var sub_total = $('#sub_total').text()
  5.  
  6. var disc = parseFloat(perc / 100) * parseFloat(sub_total) ;
  7. $('#disc_amount').text(disc.toFixed(3))

Let's start the coding part

The below snippets are the script to output a simple cashiering web application developed using HTML, CSS, Bootstrap, JS, and jQuery. Follow or copy and modify the script the way you wanted to practice your own skill and gain new knowledge for your future project

Page Interface

This is an HTML Script saved and named "index.html". It contains all the HTML elements used for the application user interface The script I created below uses CDN for loading the Bootstrap Framework and jQuery Library which requires an internet connection to work properly. Otherwise, you can download the files on their respective official website and store them in your source code directory.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <meta http-equiv="X-UA-Compatible" content="IE=edge">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>JS Discount & Tax Calculator</title>
  7. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
  8. <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
  9. <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
  10. </head>
  11. <body class="bg-dark bg-opacity-50">
  12. <div class="container my-4">
  13. <div class="mx-auto width-auto">
  14. <h1 class="text-center text-light"><b>JS Discount & Tax Calculator using jQuery</b></h1>
  15. <hr class="border-light">
  16. </div>
  17. <div class="col-lg-12 col-md-12 col-sm-12 my-2">
  18. <div class="card rounded-0">
  19. <div class="card-body">
  20. <div class="container-fluid">
  21. <h4><b>Sample Item List with Total Summary</b></h4>
  22. <hr>
  23. <div id="item-list" class="list-group">
  24. <div class="list-group-item">
  25. <div class="d-flex">
  26. <div class="px-1 col-3 text-center">
  27. <label for="" class="text-muted">Product</label>
  28. </div>
  29. <div class="px-1 col-3 text-center">
  30. <label for="" class="text-muted">Quantity</label>
  31. </div>
  32. <div class="px-1 col-3 text-center">
  33. <label for="" class="text-muted">Unit Price</label>
  34. </div>
  35. <div class="px-1 col-3 text-center">
  36. <label for="" class="text-muted">Tototal</label>
  37. </div>
  38. </div>
  39. </div>
  40. <div class="list-group-item">
  41. <div class="d-flex">
  42. <div class="px-1 col-3">
  43. <input type="text" class="form-control rounded-0" value="Sample Item 101" name="item_name[]">
  44. </div>
  45. <div class="px-1 col-3">
  46. <input type="number" class="form-control rounded-0 text-end" value="3" name="quantity[]">
  47. </div>
  48. <div class="px-1 col-3">
  49. <input type="number" step="any" class="form-control rounded-0 text-end" value="15" name="unit_price[]">
  50. </div>
  51. <div class="px-1 col-3">
  52. <input type="text" class="form-control rounded-0 text-end" value="0" readonly name="item_total[]">
  53. </div>
  54. </div>
  55. </div>
  56. <div class="list-group-item">
  57. <div class="d-flex">
  58. <div class="px-1 col-3">
  59. <input type="text" class="form-control rounded-0" value="Sample Item 102" name="item_name[]">
  60. </div>
  61. <div class="px-1 col-3">
  62. <input type="number" class="form-control rounded-0 text-end" value="4" name="quantity[]">
  63. </div>
  64. <div class="px-1 col-3">
  65. <input type="number" step="any" class="form-control rounded-0 text-end" value="20" name="unit_price[]">
  66. </div>
  67. <div class="px-1 col-3">
  68. <input type="text" class="form-control rounded-0 text-end" value="0" readonly name="item_total[]">
  69. </div>
  70. </div>
  71. </div>
  72. <div class="list-group-item">
  73. <div class="d-flex">
  74. <div class="px-1 col-3">
  75. <input type="text" class="form-control rounded-0" value="Sample Item 104" name="item_name[]">
  76. </div>
  77. <div class="px-1 col-3">
  78. <input type="number" class="form-control rounded-0 text-end" value="5" name="quantity[]">
  79. </div>
  80. <div class="px-1 col-3">
  81. <input type="number" step="any" class="form-control rounded-0 text-end" value="60" name="unit_price[]">
  82. </div>
  83. <div class="px-1 col-3">
  84. <input type="text" class="form-control rounded-0 text-end" value="0" readonly name="item_total[]">
  85. </div>
  86. </div>
  87. </div>
  88. </div>
  89. <hr>
  90. <div class="list-group rounded-0" id="total_summary">
  91. <div class="list-group-item">
  92. <div class="d-flex justify-content-end">
  93. <div class="col-auto pe-3">Sub Total</div>
  94. <div class="col-3 text-end fw-bold" id="sub_total">0.00</div>
  95. </div>
  96. </div>
  97. <div class="list-group-item">
  98. <div class="d-flex justify-content-end">
  99. <div class="col-auto pe-3">Discount %</div>
  100. <div class="col-3 text-end fw-bold"><input type="number" step="any" min="0" max="100" value="0" id="disc_perc" class="form-control text-end"></div>
  101. </div>
  102. </div>
  103. <div class="list-group-item">
  104. <div class="d-flex justify-content-end">
  105. <div class="col-auto pe-3">Discount Amount</div>
  106. <div class="col-3 text-end fw-bold" id="disc_amount">0.00</div>
  107. </div>
  108. </div>
  109. <div class="list-group-item">
  110. <div class="d-flex justify-content-end">
  111. <div class="col-auto pe-3">Tax %</div>
  112. <div class="col-3 text-end fw-bold"><input type="number" step="any" min="0" max="100" value="0" id="tax_perc" class="form-control text-end"></div>
  113. </div>
  114. </div>
  115. <div class="list-group-item">
  116. <div class="d-flex justify-content-end">
  117. <div class="col-auto pe-3">Tax Amount</div>
  118. <div class="col-3 text-end fw-bold" id="tax_amount">0.00</div>
  119. </div>
  120. </div>
  121. <div class="list-group-item">
  122. <div class="d-flex justify-content-end">
  123. <div class="col-auto pe-3">Total</div>
  124. <div class="col-3 text-end fw-bold" id="total">0.00</div>
  125. </div>
  126. </div>
  127. </div>
  128. </div>
  129. </div>
  130. </div>
  131. </div>
  132. </div>
  133. </body>
  134. <script src="script.js"></script>
  135. </html>

Creating the Main Script

The following script is the code that demonstrates the topic for this tutorial. It is a JavaScript file named "script.js" and loaded on the index or app's main page file.

  1. $(document).ready(function(){
  2.  
  3. // Calculating Item Total Price
  4. $('[name="quantity[]"], [name="unit_price[]"]').on('input, change', function(){
  5. var qty = $(this).closest('.list-group-item').find('[name="quantity[]"]').val()
  6. var price = $(this).closest('.list-group-item').find('[name="unit_price[]"]').val()
  7. qty = qty > 0 ? qty : 0 ;
  8. price = price > 0 ? price : 0 ;
  9. var total = qty * price;
  10. $(this).closest('.list-group-item').find('[name="item_total[]"]').val(total)
  11. sub_total()
  12. })
  13.  
  14. // Calculating Sub Total
  15. function sub_total(){
  16. var sub_total = 0
  17. $('[name="item_total[]"]').each(function(){
  18. sub_total += parseFloat($(this).val())
  19. })
  20. $('#sub_total').text(sub_total.toFixed(3))
  21. calc_total()
  22.  
  23. }
  24.  
  25. $('[name="quantity[]"]').trigger('change')
  26.  
  27. // calculating discount amount from percentage
  28. $('#disc_perc').on('change', function(){
  29. var perc = $(this).val()
  30. perc = perc > 0 ? perc : 0;
  31.  
  32. var sub_total = $('#sub_total').text()
  33.  
  34. var disc = parseFloat(perc / 100) * parseFloat(sub_total) ;
  35. $('#disc_amount').text(disc.toFixed(3))
  36. calc_total()
  37. })
  38. // calculating discount amount from percentage
  39. $('#tax_perc').on('change', function(){
  40. var perc = $(this).val()
  41. perc = perc > 0 ? perc : 0;
  42.  
  43. var sub_total = $('#sub_total').text()
  44.  
  45. var tax = parseFloat(perc / 100) * parseFloat(sub_total) ;
  46. $('#tax_amount').text(tax.toFixed(3))
  47. calc_total()
  48.  
  49. })
  50.  
  51. // calculate Grand Total
  52. function calc_total(){
  53. var sub_total = $('#sub_total').text()
  54. var disc = $('#disc_amount').text()
  55. var tax = $('#tax_amount').text()
  56.  
  57. var total = (parseFloat(sub_total) - parseFloat(disc)) + parseFloat(tax)
  58. $('#total').text(total.toFixed(3))
  59. }
  60. })

Output Snapshot

The image below is the sample snapshot of the interface of this sample application.

JS Discount & Tax Calculator App

DEMO VIDEO

That's it! You can now test the application and check if it achieves our main goal for this tutorial which is Calculating the Discount and Tax Amount using JavaScript and jQuery. I also provided the working source code I created for this tutorial. Feel free to download it and modify it as you wanted. The download button is located below this article.

I hope this tutorial will help you with what you are looking for and that you'll find it useful for your current or future projects. Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding :)

Comments

Submitted byMantol (not verified)on Wed, 09/20/2023 - 18:27

As your video and code for discount by percentage. can you create discount by product and pay by cash?

Add new comment