How do I add Thousands separator to my html form

Question

For example i have a textbox, I am entering 12000 and i want it to look like 12,000 in the textbox How would I do this? Im using html to do the textbox

Answer 1

You can try this simple Javascript

<script type="text/javascript">

    function addcommas(x) {
    //remove commas
    retVal = x ? parseFloat(x.replace(/,/g, '')) : 0;

    //apply formatting
    return retVal.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
  </script>

HTML Code

<div class="form-group">
                        <label>Amount </label>
                        <input type="text" name="amount"  onkeyup="this.value=addcommas(this.value);"class="form-control" required="">
                      </div>

Answer 2

Try something like this

function addCommas(nStr)
{
    nStr += '';
    x = nStr.split('.');
    x1 = x[0];
    x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + ',' + '$2');
    }
    return x1 + x2;
}

Then use it on your textboxes like so

<input type="text" id="txtBox" onchange="return addCommas(this.value)" />

Hope that helps

Answer 3

You can use the Javascript Mask API