AutoNumeric 更改值

Question

I'm trying to make my value to have thousand separators and such, but I don't understand how to use jquery and how it works.

I want to make my value from 1000 to 1,000

and I tried using AutoNumeric like this but failed

var autonumeric = new AutoNumeric.multiple(".form-control");

This is the form where I want to change the value type:

<div class="form-group">
    <div class="row">
        <div class="col-lg-3">
            <label for="total" class="label-control" id="labelsubtotal">Total : </label>
        </div>
        <div class="col-lg-9">
            <input type="text" value="" style="text-align: right;" class="form-control" id="grandTotal" name="grandTotal" disabled>
        </div> 
    </div>
</div>

This is how I import AutoNumeric:

<script src="<?php echo base_url();?>js/autonumeric-next/src/AutoNumeric.js" type="text/javascript"></script>

Basically this is what I want to do :

I want the result format changed into currency format

I succeeded in changing only 1 value, this is what I did:

<script>
$('document').ready(function(){

$(function sum() {
    console.log($('.calc'))
    var sum = 0.0;
    $('.calc').each(function() {
        sum += parseInt($(this).text());
    });
    $("#subTotal").val(sum);
    let subTotal = new AutoNumeric("#subTotal");
})();

function calculateSubTotal() {
    var subtotal = $("#subTotal").val();
    $("#subTotalDiscount").val(subtotal - (Math.round(($("#inputDiscount").val() / 100) * subtotal)));
    var subtotal_discount = parseInt($("#subTotalDiscount").val());
    $("#subTotalTax").val(Math.round(($("#inputTax").val() / 100) * subtotal_discount));
    var subtotal_tax = parseInt($("#subTotalTax").val());
    var pph = $("#inputpph").val();
    $("#SubTotalpph").val(Math.round(parseInt($("#inputpph").val()*subtotal_discount)));
    var subtotal_pph = parseInt($("#SubTotalpph").val());
    var grandtotal = subtotal_discount + subtotal_tax + subtotal_pph;
    $("#grandTotal").val(grandtotal);
    }
})
</script>

I'm lost right now.

Answer 1

Also exists a little bit another way to do it. Do next and look what you'll get(one requirement - you need to give number value only):

JS

    $('#grandTotal').on('input',function(){

            var number, s_number, f_number;

            number  = $('#grandTotal').val();
            s_number = number.replace(/,/g,'');
            f_number = formatNumber(s_number);

            console.info(f_number);
            $('#grandTotal').val(f_number);
    }); 

function formatNumber(num) {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}

But, if you want just convert value without changing it dynamically then just add this in your attached *.js :

var number, f_number;
    number  = $('#grandTotal').val(); 
    f_number = formatNumber(number);

    console.info(f_number);
    $('#grandTotal').val(f_number);

function formatNumber(num) {
  return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1,')
}