How to calculate and display MROUND value in two decimals place

Question

I have these HTML select

<tr>
    <td><input type="text" class="" id="total_score" value=""></td>
</tr>

<tr>
    <td>
        <select class="input1" id="" name="">
        <option value="0">0%</option>
        <option value="0.05">5%</option>
        <option value="0.10">10%</option>
        <option value="0.15">15%</option>
        <option value="0.20">20%</option>
        <option value="0.25">25%</option>
        <option value="0.30">30%</option>
        <option value="0.35">35%</option>
        <option value="0.40">40%</option>
        <option value="0.45">45%</option>
        <option value="0.50">50%</option>
        <option value="0.55">55%</option>
        <option value="0.60">60%</option>
        <option value="0.65">65%</option>
        <option value="0.70">70%</option>
        <option value="0.75">75%</option>
        <option value="0.80">80%</option>
        <option value="0.85">85%</option>
        <option value="0.90">90%</option>
        <option value="0.95">95%</option>
        <option value="1">100%</option>
        </select>
    </td>
    <td><input type="text" class="" id="score1" name="" value="0" placeholder="" readonly></td>
</tr>
<tr>
    <td>
        <select class="input2" id="" name="">
        <option value="0">0%</option>
        <option value="0.05">5%</option>
        <option value="0.10">10%</option>
        <option value="0.15">15%</option>
        <option value="0.20">20%</option>
        <option value="0.25">25%</option>
        <option value="0.30">30%</option>
        <option value="0.35">35%</option>
        <option value="0.40">40%</option>
        <option value="0.45">45%</option>
        <option value="0.50">50%</option>
        <option value="0.55">55%</option>
        <option value="0.60">60%</option>
        <option value="0.65">65%</option>
        <option value="0.70">70%</option>
        <option value="0.75">75%</option>
        <option value="0.80">80%</option>
        <option value="0.85">85%</option>
        <option value="0.90">90%</option>
        <option value="0.95">95%</option>
        <option value="1">100%</option>
        </select>
    </td>
    <td><input type="text" class="" id="score2" name="" value="0" placeholder="" readonly></td>
</tr>

And I calculate MROUND with these value input1, input2, score1, score2.

var input1      = $(".input1").val();
var input2      = $(".input2").val();
var score1      = $("#score1").val();
var score2      = $("#score2").val();

var sumproduct = (parseFloat(input1) * parseFloat(score1)) + (parseFloat(input2) * parseFloat(score2));
var unit = 0.50;

var sumproduct = sumproduct.toFixed(2);

var remainder = parseFloat(sumproduct) % parseFloat(unit);
var mround = (parseFloat(remainder) < parseFloat(unit)/2) ? parseFloat(sumproduct) - parseFloat(remainder) : parseFloat(sumproduct) + (parseFloat(unit) - parseFloat(remainder));

var mround = String(mround.toFixed(2));
$('#total_score').val(mround);


// console.log(input1);
// console.log(input2);
// console.log(score1);
// console.log(score2);
// console.log(sumproduct);
// console.log(mround);

When I console.log and alert the value of calculation, it looks fine but when I tried to display it inside the HTML input its always in 1 decimals place ie 3.5 . My goal is to display the value like this 3.50. the value always in 2 decimals place.

Am I missing something here ? Appreciate if someone can help this issue.

Thanks.

Is this what you want? https://stackoverflow.com/a/6134070/7351855 — Matej, Jan 30 '19 at 10:29
Possible duplicate of [Format number to always show 2 decimal places](https://stackoverflow.com/questions/6134039/format-number-to-always-show-2-decimal-places) — phuzi, Jan 30 '19 at 10:55
Also, I suppose, you don't want to use a `String` constructor. `.toFixed()` already returns a string — Limbo, Jan 30 '19 at 12:26

I_Al-thamary · Answer 1 · 2019-01-30T12:19:52.823

Your code works fine. I just rewrite var sumproduct = parseFloat((input1) * (score1)) + ((input2) * (score2)).toFixed(2); var unit = 0.50;

var sumproduct =parseFloat( sumproduct).toFixed(2);

Just reorder your code and do this parseFloat(input1).toFixed(2)

function print(){

var input1      = $(".input1").val();
var input2      = $(".input2").val();
var score1      = $("#score1").val();
var score2      = $("#score2").val();

var sumproduct = ((input1) * (score1)) + ((input2) * (score2));
var unit = 0.50;

var sumproduct =parseFloat( sumproduct).toFixed(2);

var remainder =parseFloat( (sumproduct) % (unit)).toFixed(2);
var mround = ((remainder) < (unit)/2) ? (sumproduct) - (remainder) : (sumproduct) + ((unit) - (remainder));

var mround = String(parseFloat(mround).toFixed(2));
$('#total_score').val(mround);

console.log(parseFloat(input1).toFixed(2));
console.log(parseFloat(input2).toFixed(2));
console.log(parseFloat(score1).toFixed(2));
console.log(parseFloat(score2).toFixed(2));

console.log((sumproduct));

 console.log(mround);}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<tr>
    <td><input type="text" class="" id="total_score" value=""></td>
</tr>

<tr>
    <td>
        <select class="input1" id="" name="">
        <option value="0">0%</option>
        <option value="0.05">5%</option>
        <option value="0.10">10%</option>
        <option value="0.15">15%</option>
        <option value="0.20">20%</option>
        <option value="0.25">25%</option>
        <option value="0.30">30%</option>
        <option value="0.35">35%</option>
        <option value="0.40">40%</option>
        <option value="0.45">45%</option>
        <option value="0.50">50%</option>
        <option value="0.55">55%</option>
        <option value="0.60">60%</option>
        <option value="0.65">65%</option>
        <option value="0.70">70%</option>
        <option value="0.75">75%</option>
        <option value="0.80">80%</option>
        <option value="0.85">85%</option>
        <option value="0.90">90%</option>
        <option value="0.95">95%</option>
        <option value="1">100%</option>
        </select>
    </td>
    <td><input type="text" class="" id="score1" name="" value="0.00" placeholder="" ></td>
</tr>
<tr>

    <td>Telekom Malaysia Billing Arrears</td>
    <td>
        <select class="input2" id="" name="">
        <option value="0">0%</option>
        <option value="0.05">5%</option>
        <option value="0.10">10%</option>
        <option value="0.15">15%</option>
        <option value="0.20">20%</option>
        <option value="0.25">25%</option>
        <option value="0.30">30%</option>
        <option value="0.35">35%</option>
        <option value="0.40">40%</option>
        <option value="0.45">45%</option>
        <option value="0.50">50%</option>
        <option value="0.55">55%</option>
        <option value="0.60">60%</option>
        <option value="0.65">65%</option>
        <option value="0.70">70%</option>
        <option value="0.75">75%</option>
        <option value="0.80">80%</option>
        <option value="0.85">85%</option>
        <option value="0.90">90%</option>
        <option value="0.95">95%</option>
        <option value="1">100%</option>
        </select>
    </td>
    <td><input type="text" class="" id="score2" name="" value="0.00" placeholder="" ></td>
    <td><input type="button" onclick="print()" value="show the result"> </td>
</tr>

Piotr Mirosz · Answer 2 · 2019-01-30T11:35:35.067

-1

when you using val it's value so 1.00 == 1, so even if you passing 1.00 system will pass value of 1 instead of 1.00, because they are equal. IF you need to display value inside console, alert, prompt, inner etc, you don't passing VAL.

IF you need replace numeric val in to string using .toString() so put last code like that var mround = (mround.toFixed(2)).toString(); and it will work xD

edited Jan 30 '19 at 11:35

answered Jan 30 '19 at 10:40

Piotr Mirosz

846
9
20

Please provide a complete answer including a code sample of what exactly you mean – derHugo Jan 30 '19 at 11:03

How to calculate and display MROUND value in two decimals place

2 Answers2