1

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:

enter image description here

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.

harnamc
  • 541
  • 6
  • 20
  • 1
    possible duplicate of [Format number to always show 2 decimal places](http://stackoverflow.com/questions/6134039/format-number-to-always-show-2-decimal-places) – stevenw00 Aug 28 '15 at 02:36

3 Answers3

6

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

Community
  • 1
  • 1
J Santosh
  • 3,808
  • 2
  • 22
  • 43
  • Perfect J Santosh... So annoying that it was something so small as that... Would you happen to know why it doesnt work when the type="number"? – harnamc Aug 28 '15 at 02:48
  • @Harnamc it's because the browser automatically converts the value to a number, and displays it without the string format. – Buzinas Aug 28 '15 at 02:50
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" />
mcon
  • 679
  • 6
  • 22
  • Buzinas you are right, works fine in chrome but in Firefox it doesnt work when you use type="number"... going to use J Santosh's answer and change the input to type="text" and use RegEx to limit it to only numbers. – harnamc Aug 28 '15 at 02:53
  • @mcon - it's working fine when you do type="text" in Firefox now. It was a browser issue. Thanks for your help to add extra decimal on the subtotal as well. Forgot about that :) – harnamc Aug 28 '15 at 03:16
0

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

But if you need 2.39 try 

parseInt(2.399 * 100)/100
kiranvj
  • 32,342
  • 7
  • 71
  • 76