javascript/jquery: how to limit input value to 2 decimals after the point

Question

I am struggling with an input which should give me the substraction from input B - input A in 2 decimals after the point. It works only sometimes:

$('.b').on('keyup', function() {
  var substr = $('.b').val() - $('.a').val();
  $('.c').val(substr).toFixed(2);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
A <input type="text" class="form-control a" value="" /><br /><br /> B <input type="text" class="form-control b" value="" /><br /><br /> B-A <input type="text" class="form-control c" value="" />

Per example: if you fill in in A: 0.58 and in B 0.82 the value in C is in 2 decimals But if i change the value in B to 0.81, the value of C is NOT in 2 decimals anymore!

Why this strange behaviour?

Didn't you notice the error message in the console? If you didn't have the console open, why not? That should be the first place you look when you have JavaScript that doesn't work as expected. — Barmar, Aug 06 '21 at 16:24
`toFixed()` is a method of the `Number` class, the value of an input field is a string; you have to replace `val(substr).toFixed(2)` with `val(substr.toFixed(2))` — secan, Aug 06 '21 at 16:27
`$('.c').val(substr).toFixed(2);` sets the `val(substr)` *then* calls .toFixed on the result of `.val()` — freedomn-m, Aug 06 '21 at 16:40

score 3 · Accepted Answer · answered Aug 06 '21 at 16:22

You should be calling toFixed() on substr:

$('.b').on('keyup', function() {
    var substr = $('.b').val() - $('.a').val();
    $('.c').val(substr.toFixed(2))
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
A <input type="text" class="form-control a" value="" /><br /><br />


 B <input type="text" class="form-control b" value="" /><br /><br />


  B-A <input type="text" class="form-control c" value="" />

score 2 · Answer 2 · answered Aug 06 '21 at 17:04

It would be best to cast the variables as Float. This will allow you to use .toFixed() properly.

Consider the following.

$("input.b").on('keyup', function() {
  var a = parseFloat($("input.a").val());
  var b = parseFloat($("input.b").val());
  var c = (a - b).toFixed(2);
  $("input.c").val(c);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
A <input type="text" class="form-control a" value="19.9999" /><br /><br /> B <input type="text" class="form-control b" value="3.33333" /><br /><br /> B-A <input type="text" class="form-control c" value="" />

In your script, you had a minor typo too:

$('.c').val(substr).toFixed(2);

This would not work as expected, I believe you meant:

$('.c').val(substr.toFixed(2));

Yet as this would be String variables, it may not work as expected.

score 0 · Answer 3 · edited Aug 09 '21 at 20:41

0

var n =1.7373773;

n=n.toFixed(2);

document.write(n);

I think you are referring to this.

This will output n=1.73

edited Aug 09 '21 at 20:41

marc_s

732,580
175
1,330
1,459

answered Aug 07 '21 at 07:22

Hernando Abella

286
2
13

1

`(1.7373773).toFixed(2)` actually returns `"1.74"` – Đinh Carabus Aug 07 '21 at 07:57

javascript/jquery: how to limit input value to 2 decimals after the point

3 Answers3