CODEWITHSUNDEEP
javascriptjquery
naveed Softdukan
naveed Softdukan

Reputation: 89

add comma after thousand amount in javascript

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+

Upvotes: 1

Views: 451

Answers (3)

Ali
Ali

Reputation: 1383

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>

Upvotes: 0

pouyan
pouyan

Reputation: 3439

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.

Upvotes: 2

nauval
nauval

Reputation: 169

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>

Upvotes: 0

Related Questions