Home » Jquery » javascript – Adding comma Separators for a value after a calculation

javascript – Adding comma Separators for a value after a calculation

Posted by: admin February 22, 2020 Leave a comment

Questions:

The calculation , i have setup 2 input fields where multiplication will take place. The text boxes will accept number input , while displaying comma separation to the value.Before the multiplication, i remove the commas and then pass the result to text box 3. How can i show the answer to the end user with comma separation for below instance ? Appreciate your great help.

function calculate() {

  var E1 =   $("#E1").val().split(",").join(""); 
  var E2 =   $("#E2").val().split(",").join("");
  
  var result = E1*E2;
  $("#E3").val(result);
  
}


//For comma seperation
$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="form-group">
    <label>Value 01</label>
    <input class="form-control number" type="tel" id="E1" required oninput="calculate()" />
</div>

<div class="form-group">
    <label>Value 02</label>
    <input class="form-control number" type="tel" id="E2" required oninput="calculate()" />
</div>

<div class="form-group">
    <label>Value 03 (Result)</label>
    <input class="form-control number" type="tel" id="E3"  />
</div>
How to&Answer:

Just added digits function this function return make comma for every three digits. Hope this help you.

function calculate() {

  var E1 = $("#E1").val().split(",").join("");
  var E2 = $("#E2").val().split(",").join("");

  var result = E1 * E2;
  $("#E3").val(result);
  $("#E3").digits();

}

$.fn.digits = function() {
  return this.each(function() {
    $(this).val($(this).val().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,"));
  })
}
//For comma seperation
$('input.number').keyup(function(event) {

  // skip for arrow keys
  if (event.which >= 37 && event.which <= 40) return;

  // format number
  $(this).val(function(index, value) {
    return value
      .replace(/\D/g, "")
      .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="form-group">
    <label>Value 01</label>
    <input class="form-control number" type="tel" id="E1" required oninput="calculate()" />
</div>

<div class="form-group">
    <label>Value 02</label>
    <input class="form-control number" type="tel" id="E2" required oninput="calculate()" />
</div>

<div class="form-group">
    <label>Value 03 (Result)</label>
    <input class="form-control number" type="tel" id="E3"  />
</div>

Answer:

function calculate() {

  var E1 =   $("#E1").val().split(",").join(""); 
  var E2 =   $("#E2").val().split(",").join("");

  var result = E1*E2;
  $("#E3").val(result);
  formatNumber($("#E3"))

}

function formatNumber(input) {
  // format number
  input.val(function(index, value) {
    return value
    .replace(/\D/g, "")
    .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
    ;
  });



//For comma seperation
$('input.number').keyup(function(event) {

  // skip for arrow keys
  if(event.which >= 37 && event.which <= 40) return;  

  formatNumber($(this))
});