# Dynamic Sales Tax Calculator In jQuery - Edit Price Helper

File Size: 92.1 KB 2505 11/26/2019 01:01:00 UTC 11/20/2019 01:58:34 UTC Go to website MIT

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.