How to restrict the price to 2 decimal points

Question

My Html

<div class="product-line">              
                    <a href="#" alt="close" class="btn-close" title="Remove"><img alt="remove" src="img/close.png" /></a>
                    <input class="input-text" name="product-code" type="text" placeholder="Product Code" />
                    <input class="input-text" name="product-quantity" type="text" placeholder="Quantity" />
                    <input class="input-text" name="product-discript" type="text" placeholder="Discription of Product" disabled />
                    <label class="label-sign">&pound;</label>
                    <input class="input-text price" name="product-price" type="text" placeholder="RRP Price" disabled />
                        <br>
</div>

My JS code line

price = $(this).parent("div.product-line").find("input[name=product-price]").val( Number(price).toFixed(2)  *  quantity )

Basically if I multiply for example 40.2 quantity 3, i get something like 120.600000000.... How can i restrict it to 2 decimal points.

The data is coming in via JSON (made by someone else).

I am a JS newbie

http://stackoverflow.com/questions/11832914/round-to-at-most-2-decimal-places-in-javascript — Aheinlein, May 06 '14 at 15:16
The OP is already using toFixed, it's just in the wrong place, so it's not really a duplicate. — adeneo, May 06 '14 at 15:17
@A.Wolff - I was really anwering the first comment, duplicate of "how to round numbers", I guess Google would have worked if you'd search for toFixed and read the MDN docs. — adeneo, May 06 '14 at 15:20
@adeneo Ya but then i wouldn't have posted a so rude comment. Even i keep it for History ;) — A. Wolff, May 06 '14 at 15:21
@All-the-above! I thought that's what the SO is for - to help others to learn and to better what we know and love to do!!! Why voting down the guy. He already said that he's a newbie. If you don't want to help and you don't care, just skip the question and work/answer something that's for you like a Featured question! Sometimes for a newbie things might get too overwhelming or confusing. Don't judge, but help! — GTodorov, May 06 '14 at 15:26
@Thank you everyone for all the comments and help! I even appreciate negative comments as it help better my skills. — Zinox, May 06 '14 at 15:37

score 6 · Accepted Answer · answered May 06 '14 at 15:15

6

Just move toFixed to the output of the multiplication instead.

.val( ( Number(price) *  quantity ).toFixed(2) );

answered May 06 '14 at 15:15

adeneo

312,895
29
395
388

Thank you! I was not exactly sure why it was not working. – Zinox May 06 '14 at 15:32
Can you also tell me why this --- Number( $("input[name=order-total]").val(sum) ).toFixed(2); --- is not working, Thanks in advance – Zinox May 06 '14 at 15:49
1

It's not working because `val(sum)` returns the jQuery object, which has no toFixed method. You have to convert the passed in value, as in `val( sum.toFixed(2) )` – adeneo May 06 '14 at 16:02
Thank you! I managed to figure it out using your example, but now I understand why. Thnaks. – Zinox May 06 '14 at 16:22

score 1 · Answer 2 · answered May 06 '14 at 15:18

1

Try this:

var price = $(this).parent("div.product-line").find("input[name=product-price]").val(( Number(price) * quantity ).toFixed(2));

answered May 06 '14 at 15:18

user3365207

235
6
18

Thank you, Help most appreciated. – Zinox May 06 '14 at 15:33

score 0 · Answer 3 · answered May 06 '14 at 15:20

First multiply then use to fixed...

price = $(this).parent("div.product-line").find("input[name=product-price]").val( Number(price)  *  quantity ).toFixed(2)

jQuery to round off decimal values

The toFixed() method converts a number into a string, keeping a specified number of decimals.

var iNum = 12345.6789;
iNum.toFixed();    // Returns "12346": note rounding, no fractional part
iNum.toFixed(1);   // Returns "12345.7": note rounding
iNum.toFixed(6);   // Returns "12345.678900": note added zeros

The toPrecision() method formats a number to a specified length.

var iNum = 5.123456;
iNum.toPrecision();    // Returns 5.123456
iNum.toPrecision(5);   // Returns 5.1235
iNum.toPrecision(2);   // Returns 5.1
iNum.toPrecision(1);   // Returns 5

But then you will be wondering how toPrecision() is different from toFixed()? Well, they are different.toFixed() gives you a fixed number of decimal places, whereas the other gives you a fixed number of significant digits.

var iNum = 15.667;
iNum.toFixed(2);        // Returns "15.67"
iNum.toPrecision(2);    // Returns "16"
iNum.toPrecision(3);    // Returns "15.7"

score 0 · Answer 4 · answered May 06 '14 at 15:21

0

One thing you can do if you are OK with slight rounding (sounds like you won't be but might as well give multiple suggestions), is to wrap your result in toFixed

(Number(price) * quantity).toFixed(2)

but, really, if you need precision for floating point numbers you should looking into something like bigDecimal.js

answered May 06 '14 at 15:21

Isaac Chansky

65
1
4

Thank you! Help most appreciated. – Zinox May 06 '14 at 15:33

How to restrict the price to 2 decimal points

4 Answers4