Dynamic Sales Tax Calculator In jQuery - Edit Price Helper

Edit Price Helper is a jQuery based Sales Tax Calculator that dynamically calculates and displays the after-tax price based on the tax rate you provide.

How to use it:

1. Create a number input to accept the pre-tax price input.

<input id="price" name="price" type="number" value="10" steps="0.01" min="0">

2. Create a number input or select box to accept the tax rate input.

<label for="tax">Tax Rate</label>
<select id="tax" class="form-control">
  <option value="0">0%</option>
  <option value="0.125">12.5%</option>
  <option value="0.2">20%</option>
</select>

<!-- OR -->
<label for="tax">Tax Rate</label>
<input id="tax" name="tax" type="number" value="0.125" steps="0.01" min="0" max="1">

3. Include the necessary JavaScript and CSS files on the page.

<link href="dist/editpricehelper.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<script src="dist/jquery.editpricehelper.js"></script>

4. Initialize the Sales Tax Calculator by calling the function on the price input. That's it.

$(function() {
  var priceHelper = $("#price").editpricehelper({
      taxRateInput: '#tax'
  });
});

5. Initialize the Sales Tax Calculator by calling the function on the price input. That's it.

$(function() {
  var priceHelper = $("#price").editpricehelper({
      taxRateInput: '#tax'
  });
});

6. Customize the text of labels.

$(function() {
  var priceHelper = $("#price").editpricehelper({
      taxRateInput: '#tax',
      mainLabel:           'Price',
      priceTaxLabel:       'All taxes included',
      priceNoTaxLabel:     'Pre-tax',
      taxAmountLabel:      'Tax',
      defaultLabel:        'default'
  });
});

7. Default CSS selectors.

$(function() {
  var priceHelper = $("#price").editpricehelper({
      taxRateInput: '#tax',
      priceTaxClass:       'price price_tax',
      priceNoTaxClass:     'price price_notax',
      taxAmountClass:      'price price_tax-amount',
      taxRateClass:        'price price_tax-rate',
      taxRateDisplayClass: 'price__tax-rate',
      labelClass:          'price__label',
      inputClass:          'price__input'
  });
});

8. All possible options to customize the Sales Tax Calculator.

• priceType: Type of price of the main input: `tax` or `notax`.
• otherPriceInput: Selector of an existing input containing the complementary price. Otherwise, it will be created.
• taxRateInput: Selector of an existing input containing the tax rate. Otherwise, a default taxe rate is needed.
• taxRate: Default tax rate to apply in case there's no input or no value is entered.
• taxRateInPercent: Indicate weather the tax rate is in percent or not, eg. `20` instead of `0.2` for instance.
• precision: Precision of the displayed numbers.
• urlCalculate: URL to a script calculating the prices. Otherwise, they will be calculated in-house.
• displayTaxAmount: Display the tax amount or not.

$(function() {
  var priceHelper = $("#price").editpricehelper({
      taxRateInput: '#tax',
      priceType: 'notax',
      otherPriceInput: null,
      taxRate: null,
      taxRateInPercent: false,
      precision: 2,
      urlCalculate: null,
      displayTaxAmount: true
  });
});

---

This awesome jQuery plugin is developed by tcharlss. For more Advanced Usages, please check the demo page or visit the official website.