Separate numbers with comma n fields in my code

Question

I have the following code. In the text input field how can I make it so that a comma is appropriately added to the number? For example, instead of it saying “1000” make it say “1,000”. Or as another example, if I inputted “1000000” make it say “1,000,000”. Unfortunately JS is not my strong side. Thank you in advance!

  function priceCalculation(a){
           if(a <= 10000){
             return 0.00099;
           }else if(a >= 10001 && a <= 25000 ){
             return 0.00095;
           }else if(a >= 25001 && a <= 50000 ){
             return 0.00089;
           }else if(a >= 50001 && a <= 100000 ){
             return 0.00075;
           }else{
             return 0.00075;
           }
        }

        $('#likecount').keyup(function(){
          var price = priceCalculation($(this).val());
          console.log(price)
          var total = $(this).val() * price;
          $('#output').text(total.toFixed(2));
        }); 



<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <input type="text" id="likecount" />
        <p style="padding: 20px 0px; font-weight: bold; color: #222; ">Your Cost: <b><span> $</span><span id="output" style="color: #004f04;"></span></b></p>

Screenshot where I need the commas:

Possible duplicate of: http://stackoverflow.com/questions/149055/how-can-i-format-numbers-as-money-in-javascript — AndreFeijo, Nov 09 '16 at 04:23

score 1 · Answer 1 · answered Nov 09 '16 at 04:22

1

You can use the function toLocaleString(), it will make sure the final number will look like you want:

console.log((1000000).toLocaleString())
console.log((123456.321).toLocaleString())
console.log((123.3212).toLocaleString())
console.log((1234.56).toLocaleString())

answered Nov 09 '16 at 04:22

Dekel

60,707
10
101
129

Thank you so much. Unfortunately, my JS knowledge is extremely bad. Where should I type this code? – Morgari Nov 09 '16 at 04:27
1

`$('#output').text(total.toLocaleString()) ` – Dekel Nov 09 '16 at 04:29
Unfortunately nothing has changed and my numbers in the field are still without commas. – Morgari Nov 09 '16 at 04:36
But I noticed that it has changed in the "Price" value. But I need the commas here (screenshot in the tread attached) – Morgari Nov 09 '16 at 04:41
I love your solution. Could you, please, explain where should I type the code in my case (commas for the text fields like on the screenshot)? Thank you in advance – Morgari Nov 09 '16 at 05:00
1

@Morgari, it will be nice if you vote a good answer. the voting system is here exactly for this. – Dekel Nov 09 '16 at 11:45

score 1 · Answer 2 · answered Nov 09 '16 at 04:27

You can use:

var profits=2489.8237 profits.toFixed(3) //returns 2489.824 (round up) profits.toFixed(2) //returns 2489.82 profits.toFixed(7) //returns 2489.8237000 (padding)

Then you can add the sign of '$'.

If you require ',' for thousand you can use:

Number.prototype.formatMoney = function(c, d, t){ var n = this, c = isNaN(c = Math.abs(c)) ? 2 : c, d = d == undefined ? "." : d, t = t == undefined ? "," : t, s = n < 0 ? "-" : "", i = String(parseInt(n = Math.abs(Number(n) || 0).toFixed(c))), j = (j = i.length) > 3 ? j % 3 : 0; return s + (j ? i.substr(0, j) + t : "") + i.substr(j).replace(/(\d{3})(?=\d)/g, "$1" + t) + (c ? d + Math.abs(n - i).toFixed(c).slice(2) : ""); };

And use it with:

(123456789.12345).formatMoney(2, '.', ',');

If you're always going to use '.' and ',', you can leave them off your method call, and the method will default them for you.

(123456789.12345).formatMoney(2);

If your culture has the two symbols flipped (i.e. Europeans), just paste over the following two lines in the formatMoneymethod:

d = d == undefined ? "," : d, t = t == undefined ? "." : t,

Thank you so much @javarbtech. Unfortunately, my JS knowledge is extremely bad. Where should I type this code? — Morgari, Nov 09 '16 at 04:28

four · Accepted Answer · 2016-11-09T07:52:34.550

with the use of ECMAScript 6's number formatting (see here) you can do it like:

UPDATED SCRIPT :

function priceCalculation(a){
    if(a <= 10000){
        return 0.00099;
    }else if(a >= 10001 && a <= 25000 ){
        return 0.00095;
    }else if(a >= 25001 && a <= 50000 ){
        return 0.00089;
    }else if(a >= 50001 && a <= 100000 ){
        return 0.00075;
    }else{
        return 0.00075;
    }
}

// number format set to en-US e.g (from 1500 to 1,500)
var numFormat = new Intl.NumberFormat("en-US");

$('#likecount').keyup(function(e){
    // if a '.' is pressed
 if($(this).val().endsWith('.')) {
     return;
    }

    // if input value is empty then assign '0' else the original value
    var inputVal = $(this).val() === ''?'0':$(this).val();
  
    // replace the ',' to '' so we won't get a NaN result
    // on arithmetic operations
    inputVal = parseFloat(inputVal.replace(/[$|,]/g, ''));
    var price = priceCalculation(parseInt(inputVal));
    var total = inputVal * price;
    var formatted = numFormat.format(inputVal) // set format to input
    $(this).val(formatted); // display the formatted input back
    $('#output').text(numFormat.format(total)); // display the total price
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="likecount" />
        <p style="padding: 20px 0px; font-weight: bold; color: #222; ">Your Cost: <b><span> $</span><span id="output" style="color: #004f04;"></span></b></p>

Great Solution! But I need the separator for the input field. Could you, please, explain where should I type the code in my case (commas for the input fields like on the screenshot)? Thank you in advance — Morgari, Nov 09 '16 at 05:14

Separate numbers with comma n fields in my code

3 Answers3