'How do I format a number to 2 decimal places, but only if there are already decimals?

I have a jQuery 1.5+ script, and you select a quantity in a drop-down menu (1,2,3, etc) and it multiplies that quantity by $1.50 to show you a total price. Basically - it's multiplying the quantity selected (1, 2, 3, etc) by the base price of $1.50 - BUT - I can't figure out how to display the price correctly with decimals - example: if you select a quantity of 2, the price displays correctly as $3 (no decimals). But, if you choose 1, or 3, the price displays as $1.5 / $4.5 - missing a 0 in the hundredths decimal place.

Here's the code - any idea how to show a second 0 in the case that there are not already two decimals? $3 should stay as $3, but $4.5 should become $4.50, etc - I can't get it to work without showing ALL numbers to two decimals, and that's where I'm stuck!

<script type='text/javascript'>     
    $(function() {         
        $('#myQuantity').change(function() {             
            var x = $(this).val();                      
            $('#myAmount').text('$'+(x*1.5));// this is the part that isn't displaying decimals correctly!
        });     
    }); 
</script>

I'm experimenting with something like result = num.toFixed(2); but can't get it to work yet.

Thank you Kindly!

javascriptjqueryhtmldecimal


Solution 1:[1]

Working example: http://jsfiddle.net/peeter/JxPZH/

$(document).ready(function() {
    $('#itemQuantitySelect_3').change(function() {
        
        var itemPrice = 1.50;
        var itemQuantity = $(this).val();
        var quantityPrice = (itemPrice * itemQuantity);
        if(Math.round(quantityPrice) !== quantityPrice) {
            quantityPrice = quantityPrice.toFixed(2);
        }
        
        $(this).next("span").html("$" + quantityPrice);

    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="/" method="post">
    <select id='itemQuantitySelect_3' name="itemQuantity_3">
        <option value='1'>1 Item</option>
        <option value='2'>2 Items</option>
        <option value='3'>3 Items</option>
    </select>
    <span>$1.50</span>
</form>

Solution 2:[2]

This should do the job:

var formattedNumber = (x * 1.5).toFixed(2).replace(/[.,]00$/, "");

Solution 3:[3]

I suggest:

Math.round(floatNumber*100)/100;

It automatically adds 0, 1 or 2 decimal places.

Solution 4:[4]

How about

var str = num.toFixed(2).replace(/\.00$/, '');

Solution 5:[5]

if a number%1 does not return zero, it is not an integer.

//var s='123';
var s='1.2';

s=Number(s);
alert(s%1? s.toFixed(2): s);

Solution 6:[6]

Use this function:

//E.g. 0.5 becomes 0.50; 7 stays as 7.

function twoDecimalPlacesIfCents(amount){
    return (amount % 1 !== 0) ? amount.toFixed(2) : amount;
}

Solution 7:[7]

const number = Number(Number(value).toFixed(t));

With this you can cast your number to the correct amount of decimal places and, when converting back to Number, get rid of all useless zeros.

Solution 8:[8]

value % 1 !== 0 ? value.toFixed(2) : value;

Solution 9:[9]

If you want more generic solution, based on odrm idea.

function toFixed(value, fractionDigits) {
    return value.toFixed(fractionDigits).replace(/[.,](00)|0$/, '')
}

Solution 10:[10]

One other possibility, coerce the string into a number and leverage the fact that 0.00 is falsey to determine how it displays:

+(1.123456.toFixed(2)) || 0;
>> 1.12

Where as:

+(0.00123.toFixed(2)) || 0;
>> 0

Solution 11:[11]

There's actually a much more dynamic solution to achieve this. This is useful especially when your number of digits will change.

var formattedNumber = (x * 1.5).toFixed(2).replace(/\.0+$|(\.\d*[1-9])(0+)$/, "");

This will end up to this:

+(2.1234).toFixed(2).replace(/\.0+$|(\.\d*[1-9]);
>> 2.12

// but as mentioned it is dynamic
+(2.1234).toFixed(3).replace(/\.0+$|(\.\d*[1-9]);
>> 2.123

+(2).toFixed(3).replace(/\.0+$|(\.\d*[1-9]);
>> 2

Solution 12:[12]

  const getPercentage = (partialValue, totalValue) => {
    return ((100 * partialValue) / totalValue).toFixed(2).replace(/[.,]00$/, "");
  };

You can just use this function, and call it wherever you want to

Solution 13:[13]

I would suggest:

Intl.NumberFormat("en-US").format(<number>);

Related Questions