How can I get an input text to expand its digits to two if the user only enters one?

Question

I want to display values in text inputs that are in "dollar format"; IOW, instead of "10.5" I want it to be "10.50"

I was able to do that in the grand total box like so (last line of code):

$(document).on("blur", '.amountbox', function (e) {
    var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
    var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val()) : 0;
    var amount3 = $('[id$=boxAmount3]').val() != '' ? parseFloat($('[id$=boxAmount3]').val()) : 0;
    var amount4 = $('[id$=boxAmount4]').val() != '' ? parseFloat($('[id$=boxAmount4]').val()) : 0;
    var amount5 = $('[id$=boxAmount5]').val() != '' ? parseFloat($('[id$=boxAmount5]').val()) : 0;
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
});

That working, I thought maybe I could get the individual "amount" boxes to work similarly by doing this (adding ".toFixed(2)" to their val()s):

var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val().toFixed(2)) : 0;
var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val().toFixed(2)) : 0;
. . .

It didn't; it fact, it broke the existing functionality.

So I then "dialed it back a bit" and tried on just the first "Amount" box like so:

$('[id$=boxAmount1]').val() == parseFloat($('[id$=boxAmount1]').val().toFixed(2));

...but that also failed (entering "10.5" and exiting/blurring did not convert the "10.5" to "10.50" as I hoped).

How can I cause the inputs to always expand or contract to display two digits? IOW:

"10" should become "10.00"
"10.5" should become "10.50"
"10.567" should become "10.57"

etc.

I think your problem was already mentioned and answered here: http://stackoverflow.com/questions/6134039/format-number-to-always-show-2-decimal-places — Balázs Varga, Jul 17 '15 at 23:07
@charlietfl: Is this some kind of involved wordplay about string bikinis? — B. Clay Shannon-B. Crow Raven, Jul 17 '15 at 23:28

Rick Hitchcock · Accepted Answer · 2015-07-18T10:49:15.873

Instead of this:

$('[id$=boxAmount1]').val() == parseFloat($('[id$=boxAmount1]').val().toFixed(2));

… do this:

$('[id$=boxAmount1]').val(parseFloat($('[id$=boxAmount1]').val()).toFixed(2));

Note that the toFixed() method works with numbers only, so you need to apply it to the numeric result of parseFloat() instead of the string result of val().

Your entire code can be reduced to the following:

$(document).on('blur', '.amountbox', function() {
  var grandtotal = 0;
  $('.amountbox').each(function() {
    var v= +$(this).val();
    if(v>'') {
      $(this).val(v.toFixed(2));
      grandtotal+= v;
    }
  });
  $('#boxGrandTotal').val(grandtotal.toFixed(2));
});

The jQuery each method saves you the trouble of looking at each input individually.

Prepending a plus sign (+) to a string coerces it to a number, so parseFloat isn't needed.

Fiddle

additional tweak would be make sure result `!="NaN"` – charlietfl Jul 17 '15 at 23:34 — charlietfl, Jul 17 '15 at 23:34

score 0 · Answer 2 · answered Jul 17 '15 at 23:57

To be able to apply this to all the text inputs (without negatively impacting the others when they are blank), I had to spread the code into 5 handlers (in addition to the original one):

/* boxAmount1...boxAmount5 - when any of them change, update boxGrandTotal */
$(document).on("blur", '.amountbox', function (e) {
    var amount1 = $('[id$=boxAmount1]').val() != '' ? parseFloat($('[id$=boxAmount1]').val()) : 0;
    var amount2 = $('[id$=boxAmount2]').val() != '' ? parseFloat($('[id$=boxAmount2]').val()) : 0;
    var amount3 = $('[id$=boxAmount3]').val() != '' ? parseFloat($('[id$=boxAmount3]').val()) : 0;
    var amount4 = $('[id$=boxAmount4]').val() != '' ? parseFloat($('[id$=boxAmount4]').val()) : 0;
    var amount5 = $('[id$=boxAmount5]').val() != '' ? parseFloat($('[id$=boxAmount5]').val()) : 0;
    var grandtotal = amount1 + amount2 + amount3 + amount4 + amount5;
    $('[id$=boxGrandTotal]').val(parseFloat(grandtotal).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount1]', function (e) {
    $('[id$=boxAmount1]').val(parseFloat($('[id$=boxAmount1]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount2]', function (e) {
    $('[id$=boxAmount2]').val(parseFloat($('[id$=boxAmount2]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount3]', function (e) {
    $('[id$=boxAmount3]').val(parseFloat($('[id$=boxAmount3]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount4]', function (e) {
    $('[id$=boxAmount4]').val(parseFloat($('[id$=boxAmount4]').val()).toFixed(2));
});

$(document).on("blur", '[id$=boxAmount5]', function (e) {
    $('[id$=boxAmount5]').val(parseFloat($('[id$=boxAmount5]').val()).toFixed(2));
});

Plugin time for Bonzo?

How can I get an input text to expand its digits to two if the user only enters one?

2 Answers2