Starting 2015 customers from other EU countries must be charged their home VAT rate. (This does not apply to companies which can provide a VAT ID – in their case no VAT is charged)
Since it is legally demanded to show the prices including the VAT, the problem was:
How to update a price in a html table column using java script?
Probably other developers have to deal with the update of html table in java script so here is my solution.
The code operates on a html table with the id “ordertable” – in this simple example with only 3 columns:
Name | Price | Price incl. x% VAT |
Product A | 100 | ? |
Product B | 250 | ? |
A combobox is required to select the VAT rate – the assigned “value” for each entry is the VAT rate.
<select id="country" onchange="changeCountry(this.value)"> <option value="19">19% VAT</option> <option value="15">Other 15%</option> <option value="21">Other 21%</option> </select>
This is the code which performs the update of the table above:
function changeCountry(vat) { var el = document.getElementById('vat1'); el.innerHTML = vat; var order = document.getElementById('ordertable'); for(var i=1; i<order.rows.length;i++) { mycell = order.rows[i].cells[1]; myvatcell = order.rows[i].cells[2]; if ((mycell!=null) && !isNaN(mycell.innerText) ) myvatcell.innerText = (parseFloat(mycell.innerText) * (1+(parseFloat(vat)/100))).toFixed(2); } }
I collected the VAT rates of the EU countries while working on the WPTools MultiDemo.
An official source for the rates is the link below – the values in the demo may be outdated or incorrect.
http://ec.europa.eu/taxation_customs/taxation/vat/how_vat_works/rates/index_en.htm.