Add following snippet in HTML where you want to show the VAT Calculator.

<label for="vat_rate">Rate of VAT, %</label>
<input type="text" id="vat_rate" size="20" value>

<br>
<label for="net_price">Net amount, euro</label>
<input type="text" id="net_price" size="20" value>

<br>
<label for="gross_price">Gross amount, euro</label>
<input type="text" id="gross_price" size="20" value>
</div>

<br>
<label for="tax_amount">Tax amount, euro</label>
<input type="text" id="tax_amount" size="20" value>

Add this code anywhere in HTML body tag.

<script>
function net_change() {
var vat_rate = document.getElementById('vat_rate');
var net_price = document.getElementById('net_price');
var gross_price = document.getElementById('gross_price');
var tax_amount = document.getElementById('tax_amount');
gross_price.value = net_price.value *(1+(vat_rate.value/100));
tax_amount.value = gross_price.value - net_price.value;
}

function gross_change() {
var vat_rate = document.getElementById('vat_rate');
var net_price = document.getElementById('net_price');
var gross_price = document.getElementById('gross_price');
var tax_amount = document.getElementById('tax_amount');
net_price.value = gross_price.value / (1 + (vat_rate.value/100));
tax_amount.value = gross_price.value - net_price.value;
}

function amount_change() {
var vat_rate = document.getElementById('vat_rate');
var net_price = document.getElementById('net_price');
var gross_price = document.getElementById('gross_price');
var tax_amount = document.getElementById('tax_amount');
net_price.value = ((tax_amount.value / vat_rate.value)*100);
gross_price.value = Number(net_price.value) + Number(tax_amount.value);;
}

function vat_change() {
var vat_rate = document.getElementById('vat_rate');
var net_price = document.getElementById('net_price');
var gross_price = document.getElementById('gross_price');
var tax_amount = document.getElementById('tax_amount');
net_price.value = gross_price.value - (gross_price.value * (vat_rate.value/100));
gross_price.value = net_price.value *(1+(vat_rate.value/100));

}

// Adds an event listener for the table
var vat_rate = document.getElementById('vat_rate');
var net_price = document.getElementById('net_price');
var gross_price = document.getElementById('gross_price');
var tax_amount = document.getElementById('tax_amount');

vat_rate.addEventListener("input", vat_change, false);
net_price.addEventListener("input", net_change, false);
gross_price.addEventListener("input", gross_change, false);
tax_amount.addEventListener("input", amount_change, false);
</script>
 

Leave a Comment

You must be logged in to post a Review.