Sales Tax Calculator JavaScript

Sales Tax Calculator JavaScript
Code Snippet:Sales tax calculator
Author: MHAYR
Published: January 20, 2024
Last Updated: January 22, 2024
Downloads: 725
License: MIT
Edit Code online: View on CodePen
Read More

This JavaScript code creates a user-friendly web-based calculator for calculating sales tax on products. It allows users to input product price and quantity, then automatically computes and displays the subtotal, tax, and total cost of the order. This tool simplifies the process of calculating sales tax, making it helpful for individuals or businesses managing pricing and taxation.

You can use this code on your e-commerce website to provide customers with a straightforward sales tax calculation too. It helps simplify the tax calculation process, reducing user errors and saving time.

How to Create a Sales Tax Calculator Using JavaScript

1. First, copy the HTML code into your webpage within the <body> tags. This code creates the form structure necessary for user input.

<center>
<div class ="form">
		<h2> Sales Tax Calculator</h5>
		<form name="orderform" id="orderform">
		<table>
</div>
  <tr><th>
   <label>Product: </label>
  </th>
  <th scope="row">
   <div align="left">
    <label><span>$</span></label>
    <input name="price" type="text" id="price" size="10">
   </div>
  </th>

  
  <tr><th>
   <label>Quantity</label>
  </th>
  <th scope="row">
   <div align="left">
    <label><span>#</span></label>
    <input name="quantity" type="text" id="quantity" size="10">
   </div>
  </th>
 
  <tr><th>
   <label>Subtotal:</label>
  </th>
  <th scope="row">   
   <div align="left">
    <label>$</label>
    <input name="subtotal" type="text" id="subtotal" onFocus="this.form.elements[1].focus()" size="10"> &nbsp;&nbsp;
    <input name="subBtn" onClick="subTotal();" type="button" id="subBtn" value="Subtotal">
   </div>
  </th>
 </tr>
  
   <tr><th>
   <label>Tax:</label>
  </th>
   <th scope="row">
   <div align="left">
    <label>$</label>
     <input name="salestax" type="text" id="salestax" onFocus="this.form.elements[1].focus()" size="10"> &nbsp;&nbsp;               
     <input name="taxBtn" onClick="calculateTax();" type="button" id="taxBtn" value="Tax">  
   </div>
  </th>
 </tr>
 
  <tr><th>
   <label>Total:</label>
  </th>
  <th scope="row">
   <div align="left">
    <label>$</label>
    <input name="gtotal" type="text" id="gtotal" onFocus="this.form.elements[2].focus()" size="10"> &nbsp;&nbsp;
    <input name="gtotalBtn" onClick="grandTotal();" type="button" id="gtotalBtn" value="Calculate Order">
   </div>
  </th>
 </tr>
</table>
</form>      
</div>
</center>

2. Add the CSS code to your stylesheet or within a <style> tag in the HTML. This CSS provides a visually appealing layout for the form and buttons.

table{
  border-style: solid;
  border-color: black;
  border-width: 5px;
  border-radius: 5px;
  background-color: silver;
}
#subBtn{
  border-style: solid;
  border-color: black;
  border-width: 2px;
  border-radius: 5px;
}
#taxBtn{
  border-style: solid;
  border-color: black;
  border-width: 2px;
  border-radius: 5px;
}
#gtotalBtn{
  border-style: solid;
  border-color: black;
  border-width: 2px;
  border-radius: 5px;
}

3. Finally, insert the JavaScript code within a <script> tag or an external JavaScript file. These functions enable the calculation of the subtotal, tax, and grand total.

function subTotal() {
  var price = document.orderform.price.value;
  var quantity = document.orderform.quantity.value;
  productPrice = price * quantity;
  document.orderform.subtotal.value = productPrice.toFixed(2);
  return productPrice;
}
//calculateTax() takes result of subTotal function but has to refer to the result to move forward as opposed to the previous function
//.toFixed() is the decimal points
function calculateTax() {
  //var subTotal = document.orderform.subtotal.value; OR for dryer code:
  var subtotal = subTotal();
  var stax = 0.03;
    tax = subtotal * stax;
  document.orderform.salestax.value = tax.toFixed(3);
  return tax;
}
//takes the HTML output results from the previous two functions and adds them together. 
function grandTotal() {
  var subtotal = subTotal();
  var tax = calculateTax();
  document.orderform.subtotal.value = subtotal.toFixed(2);
  document.orderform.salestax.value = tax.toFixed(2);
  var gtotal = subtotal + tax;
  document.orderform.gtotal.value = gtotal.toFixed(2);
}

That’s all! hopefully, you have successfully created a Sales Tax Calculator using JavaScript. This tool simplifies the process for customers to calculate sales tax. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X