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

Viewed 108

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?

3 Answers

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="" />

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.

var n =1.7373773;

n=n.toFixed(2);

document.write(n);

I think you are referring to this.

This will output n=1.73

Related