CODEWITHSUNDEEP
javascripthtml
Kingston
Kingston

Reputation: 41

add a thousand separator to a paragraph from an input tag

I have an input tag that does calculation, but I want to get the value of the input tag and parse it to a paragraph tag and format it. Here is the input tag

<form:input id="amount" min="1" class="form-control"
                                                        type="number"  required="true"
                                                        placeholder="Enter Value"></form:input>

This is paragraph tag to format the value inputed above

<p>Inputted Amount: </p>

I have researched and have this but do not know how to pass it to the paragraph tag:

function addSeperator(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;
}

Upvotes: 0

Views: 224

Answers (1)

Marc
Marc

Reputation: 1886

You can use Intl.NumberFormat to format a number:

See this codepen I created for you.

Sample Code:

  Input:
  <input 
      id="amount" 
      min="1" 
      class="form-control"                          
      type="number"  
      required="true"
      value="87654321"
      onchange="showNumber()"
      onkeyup="showNumber()"
      placeholder="Enter Value"></input>

  <p>Inputted Amount: <span id="result"></span></p>

js:

function showNumber() {
  var n = document.querySelectorAll('#amount')[0].value;
  var formatter = new Intl.NumberFormat('de-DE', {});
  document.querySelectorAll('#result')[0].innerText = formatter.format(n);
  // → 87.654.321
}

showNumber();

See: Intl.NumberFormat

Upvotes: 3

Related Questions