I understand this may be a repeat question but I have been searching for ages and cant figure out why this isnt working.

I have 3 input fields, Subtotal, Vat and Total: I want to be able to populate the VAT and Total inpur fields with values when there is a value inputted in Subtotal and to show 2 decimal palces after. So:

4 would be 4.00 4.5 would be 4.50

HTML code for the input field:

<input name="subtotal" id="subtotal" type="number" maxlength="20" min="0" placeholder="00.00" onchange="vatCalculation();" />

<input name="vat" id="vat" type="number" maxlength="20" min="0" placeholder="00.00" readonly="true" />

<input name="total" id="total" type="number" maxlength="20" min="0" placeholder="00.00" readonly="true" />

And the javascript code I have at the moment is:

function vatCalculation() {
var subtotal = document.getElementById('subtotal').value;
var vat = parseFloat(parseFloat(subtotal) * parseFloat(0.2)).toFixed(2);
var total = parseFloat(parseFloat(subtotal) + parseFloat(vat)).toFixed(2);

document.getElementById('vat').value = vat;
document.getElementById('total').value = total;
}

I cant see where I am going wrong. When I enter 10 in the 'subtotal'input field the 'VAT' and 'Total' fields change to 2 and 12. But I want them to show 2.00 and 12.00. Screenshot below:

SOLUTION:

When using Firefox the input field of type="number" dont seem to work with javascript calculation. Workaround is to change it to a type="text" Like J Santosh as mentioned below and it works.

I understand this may be a repeat question but I have been searching for ages and cant figure out why this isnt working.

I have 3 input fields, Subtotal, Vat and Total: I want to be able to populate the VAT and Total inpur fields with values when there is a value inputted in Subtotal and to show 2 decimal palces after. So:

4 would be 4.00 4.5 would be 4.50

HTML code for the input field:

<input name="subtotal" id="subtotal" type="number" maxlength="20" min="0" placeholder="00.00" onchange="vatCalculation();" />

<input name="vat" id="vat" type="number" maxlength="20" min="0" placeholder="00.00" readonly="true" />

<input name="total" id="total" type="number" maxlength="20" min="0" placeholder="00.00" readonly="true" />

And the javascript code I have at the moment is:

function vatCalculation() {
var subtotal = document.getElementById('subtotal').value;
var vat = parseFloat(parseFloat(subtotal) * parseFloat(0.2)).toFixed(2);
var total = parseFloat(parseFloat(subtotal) + parseFloat(vat)).toFixed(2);

document.getElementById('vat').value = vat;
document.getElementById('total').value = total;
}

I cant see where I am going wrong. When I enter 10 in the 'subtotal'input field the 'VAT' and 'Total' fields change to 2 and 12. But I want them to show 2.00 and 12.00. Screenshot below:

SOLUTION:

When using Firefox the input field of type="number" dont seem to work with javascript calculation. Workaround is to change it to a type="text" Like J Santosh as mentioned below and it works.

• javascript
• jquery
• html

• 1 possible duplicate of Format number to always show 2 decimal places – stevenw00 Commented Aug 28, 2015 at 2:36

3 Answers 3

Found the issue . It is with <input type='number'> you change it to <input type='text'>

Working Fiddle

Input Type Number is not accepting decimals

Reference -1

Reference-2

Is this what you want? If so, you were pretty close. You just needed to add

document.getElementById('subtotal').value = parseFloat(subtotal).toFixed(2);

to your code as well.

function vatCalculation() {
var subtotal = document.getElementById('subtotal').value;
var vat = parseFloat(parseFloat(subtotal) * parseFloat(0.2)).toFixed(2);
var total = parseFloat(parseFloat(subtotal) + parseFloat(vat)).toFixed(2);

document.getElementById('subtotal').value = parseFloat(subtotal).toFixed(2);
document.getElementById('vat').value = vat;
document.getElementById('total').value = total;
}

<input name="subtotal" id="subtotal" type="text" maxlength="20" min="0" placeholder="00.00" onchange="vatCalculation();" />

<input name="vat" id="vat" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />

<input name="total" id="total" type="text" maxlength="20" min="0" placeholder="00.00" readonly="true" />

(2.399).toFixed(2); will give you 2.40

But if you need 2.39 try

parseInt(2.399 * 100)/100