Pure JavaScript solution number input will display 2 decimal places

Question

I'm trying to use the following code (found here: Make an html number input always display 2 decimal places) to force number inputs to display two decimal places when the input loses focus/onchange:

function setDecimal(event) {
    this.value = parseFloat(this.value).toFixed(2);
}

<input placeholder="$0.00" type="number" onchange="setDecimal" name="amount_20_20_amt" id="amount_20_20_amt" value="" autocomplete="off" min="0" max="50000000" step="0.01">

This doesn't work for some reason, although I was able to use the following inline solution and it works perfectly:

onchange="(function(el){el.value=parseFloat(el.value).toFixed(2);})(this)"

I can't use jQuery or any other libraries (business rules) and I need it to show when the input loses focus. Adjusting the step to ".01" or "any" does not accomplish this.

The JS is stored in a .js file that is loading fine, and everything else in the .js file is working fine, so I think it must be an error in the snippet, although I can't figure out what.

Where am I going wrong?

Check this out http://stackoverflow.com/questions/6134039/format-number-to-always-show-2-decimal-places — Roydon D' Souza, Nov 19 '15 at 19:19
@RoydonD'Souza - that answer involves rounding, which I definitely don't want since toFixed will do the job. I'm more interested in why the code I'm applying doesn't seem to be functioning as expected (and why the inline code does work) — bad_juju, Nov 19 '15 at 19:30

score 3 · Accepted Answer · answered Nov 19 '15 at 19:28

3

You need to call the function in onchange. Currently, you're simply referencing it.

Change this:

onchange="setDecimal"

… to this:

onchange="setDecimal(this)"

this passes the input to the function.

Then change your function to this:

function setDecimal(input) {
  input.value = parseFloat(input.value).toFixed(2);
}

function setDecimal(input) {
  input.value = parseFloat(input.value).toFixed(2);
}

<input placeholder="$0.00" type="number" onchange="setDecimal(this)" name="amount_20_20_amt" id="amount_20_20_amt" value="" autocomplete="off" min="0" max="50000000" step="0.01">

answered Nov 19 '15 at 19:28

Rick Hitchcock

35,202
5
48
79

Good suggestion, I love this – Seano666 Nov 19 '15 at 19:29
BAM! Works perfectly. Thank you! – bad_juju Nov 19 '15 at 19:36
1

Rick you are too fast, I used exactly same variables name `input` but unfortunately I am late :) look at the fiddle https://jsbin.com/gosaros/edit?html,js,output – Zohaib Ijaz Nov 19 '15 at 19:37
@dangowans, that's correct, and it affects Firefox only. Related: https://bugzilla.mozilla.org/show_bug.cgi?id=1003896 – Rick Hitchcock Jan 08 '17 at 22:12

aebabis · Answer 2 · 2015-11-19T19:34:55.413

Whenever you call a function, this is set based on how the function is called. If you call a function on an object (e.g. myObject.doTheThing()), this will be that object while you're in the scope of that function. If this is called without an object, then this becomes the global object (window).

Your second example works because you are passing this so that it can be referenced as el. You can achieve the same effect by doing this:

function setDecimal(input) {
    input.value = parseFloat(input.value).toFixed(2);
}

<input placeholder="$0.00" type="number"
    onchange="setDecimal(this)" name="amount_20_20_amt" id="amount_20_20_amt"
    value="" autocomplete="off" min="0" max="50000000" step="0.01">

You might also consider using addEventListener to bind the event instead.

document.querySelector('input').addEventListener('blur', function() {
  this.value = parseFloat(this.value).toFixed(2);
});

<input>

EDIT: @RickHitchcock is also correct. I fixed the function parenthesis problem without even noticing. You will need to make sure you have parens and make sure the element can be referenced in the scope of the function.

Pure JavaScript solution number input will display 2 decimal places

2 Answers2