Here’s a very short, quick post, detailing a Firefox scripting frustration that I discovered today.

Let’s say you have a Javascript function that calculates a value. The value represents a monetary amount, so at the end of the function you would use

return my_value.toFixed(2);

to make sure that the “cents” or “pence” part of the amount is not chopped off, even if zero. In other words, the “toFixed” method converts something like “4” to “4.00” – as long as the value is numeric of course.

Now let’s say that you want to place the value into an HTML5 “number” Input so the user can edit it if they want. No problem, assuming you have jQuery available you would use something like:

jQuery(‘#my_input’).val(my_value);

and the input element would be marked up something like this:

Taking the earlier example, if my_value is “4.00”, you would expect “4.00” to show in the input, right?

Wrong.

Firefox will always chop off non-significant zeroes when populating a number Field via JavaScript. In this example you would simply see “4” in the input.

The only solution is to change the field type from “number” to “text” – and lose the little up/down arrows in the process. There’s no other way around it. Like I said at the start of this post, very frustrating.

Hopefully this post will prevent someone wasting an hour on this problem, like I did.