add comma after thousand amount in javascript

Question

I am using slide input with following javascript,

<script type="text/javascript">
    jQuery(document).ready(function(e){
        var val1 = 0;
        var val2 = 0;
        $("#ex1").slider();
        $("#ex1").on("slide", function(slideEvt1) {
            //$("#ex1SliderVal").text((Number(slideEvt1.value) * 2.90) + (Number(val2) * 0.30));
            val1 = Number(slideEvt1.value);

            $("#ex1SliderVal").text((Number(val1) * 0.0290) + (Number(val2) * 0.30));

            $("#ex2SliderVal").text((Number(val1) * 0.0199) + (Number(val2) * 0.15));

            $("#ex3SliderVal").text((Number(val1) * 0.0225) + (Number(val2) * 0.10));

            $("#showex1").text(Number(val1));
            //console.log(val1)
        });
});
</script>

<div class="col-xs-12">
                <input id="ex1" type="text" data-slider-min="0000" data-slider-max="8000" data-slider-step="1" data-slider-value="0"/>
                <span><span style="margin-left: 30px; font-size:14px;"id="showex1">0</span></span>
            </div>

This is working properly. Only thing I want to add a comma after thousands. like 2,000 80,000 170,000

Please help me add this. Thank you+

Google? http://stackoverflow.com/questions/2901102/how-to-print-a-number-with-commas-as-thousands-separators-in-javascript -- have you tried this solution? What went wrong? — Roko C. Buljan, Apr 01 '17 at 02:55
what do you mean by 'not working for me'? what was your problem using @RokoC.Buljan link? — pouyan, Apr 01 '17 at 03:17
@pooyan Actuuly I do not know how to add this function to my script. — naveed Softdukan, Apr 01 '17 at 05:26

pouyan · Accepted Answer · 2017-04-01T08:38:26.857

in this way you can use @RokoC.Buljan usefull link for your code:

<script type="text/javascript">
jQuery(document).ready(function(e){
    var val1 = 0;
    var val2 = 0;
    $("#ex1").slider();
    $("#ex1").on("slide", function(slideEvt1) {
        //$("#ex1SliderVal").text((Number(slideEvt1.value) * 2.90) + (Number(val2) * 0.30));
        val1 = Number(slideEvt1.value);

        $("#ex1SliderVal").text(((Number(val1) * 0.0290) + (Number(val2) * 0.30)).toLocaleString(););

        $("#ex2SliderVal").text(((Number(val1) * 0.0199) + (Number(val2) * 0.15)).toLocaleString(););

        $("#ex3SliderVal").text(((Number(val1) * 0.0225) + (Number(val2) * 0.10)).toLocaleString(););

        $("#showex1").text((Number(val1)).toLocaleString(););
        //console.log(val1)
    });
});
</script>

here i used .toLocaleString(); function that has been mentioned in that link.

score 0 · Answer 2 · answered Apr 01 '17 at 03:41

How about this? just a little example

 var mynumber = document.getElementById("mynumber").innerHTML;
 mynumber = parseInt(mynumber);
 document.getElementById("mynumber-after").innerHTML = mynumber.toFixed(0).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");

<div id="mynumber">80000</div>
<div id="mynumber-after"></div>

score 0 · Answer 3 · answered Apr 01 '17 at 08:48

You can use Intl.NumberFormat

For example:

var formatter = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
  minimumFractionDigits: 2,
});

$("button").on("click", function() {
  $("span").text(formatter.format(80000))
  //If you do not want to see the currenycy symbol
  // $("span").text(formatter.format(80000).substr(1))
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button>Calculate</button>  

<span></span>

add comma after thousand amount in javascript

3 Answers3