Eliminate unnecessary decimals on results of multiplication

Question

I have 3 inputs as two numbers are multiplied and result is written on the third input. However, I need to eliminate the decimals when it is completely unnecessary.

<input type="text" name="input1" id="input1" value="" size="4" class="inputt" />
<br>
<input type="text" name="input2" id="input2" value="" size="4" class="inputt" />
<br>
<input type="text" readonly="readonly" name="input3" id="input3" value="" size="4" class="inputt" />

For example; 150.00 should be indicated as 150, but 150.50 should be remain as it is.

And also, when the result is written after multiplication, I have to click on the readonly input to make the result well rounded. I need the final indication of the result number should happen without the need of any click. To understand better, write 12.5 to the first one, 12.1123 to the second and see the result.

$(document).ready(function () { 
        $("#input1, #input2").change(function() {
$("#input3").val($("#input1").val() * $("#input2").val());

var num =$("#input3").val();
num = num.toFixed(2);
        });
    });

$( function() {
 $('#input1').keyup(function(){
   if($(this).val().indexOf('.')!=-1){         
       if($(this).val().split(".")[1].length > 2){                
           if( isNaN( parseFloat( this.value ) ) ) return;
           this.value = parseFloat(this.value).toFixed(2);
       }  
    }            
    return this;
 });
});

$( function() {
 $('#input2').keyup(function(){
   if($(this).val().indexOf('.')!=-1){         
       if($(this).val().split(".")[1].length > 5){                
           if( isNaN( parseFloat( this.value ) ) ) return;
           this.value = parseFloat(this.value).toFixed(2);
       }  
    }            
    return this;
 });
});

$('input#input3').blur(function(){
    var num = parseFloat($(this).val());
    var cleanNum = num.toFixed(2);
    $(this).val(cleanNum);

    });

Here are the codes http://jsfiddle.net/mLfkd/2/

score 0 · Accepted Answer · edited May 23 '17 at 11:45

The reason why you need to click again is because you are using .blur, which happens only after #input3 loses focus. It's redundant so I've combined that part with the .change on #input1 and #input2, and used the modulus trick from here to check if it has decimal places or not:

$(document).ready(function () {
    $("#input1, #input2").change(function () {
        var num = parseFloat($("#input1").val()) * parseFloat($("#input2").val());

        if (num % 1 != 0) {
            num = num.toFixed(2);
        } else {
            num = parseInt(num);
        }

        $("#input3").val(num);
    });
});

$(function () {
    $('#input1').keyup(function () {
        if ($(this).val().indexOf('.') != -1) {
            if ($(this).val().split(".")[1].length > 2) {
                if (isNaN(parseFloat(this.value))) return;
                this.value = parseFloat(this.value).toFixed(2);
            }
        }
        return this;
    });
});

$(function () {
    $('#input2').keyup(function () {
        if ($(this).val().indexOf('.') != -1) {
            if ($(this).val().split(".")[1].length > 5) {
                if (isNaN(parseFloat(this.value))) return;
                this.value = parseFloat(this.value).toFixed(2);
            }
        }
        return this;
    });
});

Working fiddle: http://jsfiddle.net/FMpBz/1/

Very well.. I have encountered a situation as the result is 150.00 when I write 266 to the first input and 0.5639 to the second one. Is this because of any rounding issue? — ctsnr, Sep 26 '13 at 19:15
@ctsnr Yes, toFixed is rounding ([sometimes...](http://stackoverflow.com/questions/10015027/javascript-tofixed-not-rounding)) If you just want to cut it off try [this solution](http://stackoverflow.com/a/4187164/2817961): `Math.floor(num * 100) / 100` — Justin K, Sep 26 '13 at 19:45
sounds logical but I can't get it worked with inputs 266 * 0.5639 although I tried to locate this code to possible locations. Is it possible to update the fiddle please? — ctsnr, Sep 26 '13 at 20:11
@ctsnr [Updated fiddle](http://jsfiddle.net/FMpBz/2/). The change is in line 8 of the js. 266*0.5639 gives me 149.99. — Justin K, Sep 26 '13 at 20:42

score 0 · Answer 2 · answered Sep 26 '13 at 19:09

var f1 = parseFloat(150.00).toFixed(2);
var f2 = parseFloat(150.50).toFixed(2);

function cut_it(a){
    var int_val =  parseInt(a); 
    var res = a / int_val ;
    if (res > 1) return a;
    return int_val;
}
// got the point? 
alert ( f1 + " -> " + cut_it (f1) + ", but "+  f2 + " -> " + cut_it (f2) );

Eliminate unnecessary decimals on results of multiplication

2 Answers2