CODEWITHSUNDEEP
javascriptjqueryhtml
Morgari
Morgari

Reputation: 555

Separate numbers with comma n fields in my code

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: enter image description here

Upvotes: 0

Views: 111

Answers (3)

four
four

Reputation: 564

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>

Upvotes: 1

jafarbtech
jafarbtech

Reputation: 7013

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,

Upvotes: 1

Dekel
Dekel

Reputation: 62656

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())

Upvotes: 1

Related Questions