Search code examples
javascriptphpjquerynumber-formatting

PHP number format doesn't allow jquery sum

I have a problem to do calculations with numbers in jquery. When the number is in the PHP number-format, jquery doesn't detect those numbers. Please find the code and the screen-shot of the output. Any help would be appreciated.

  <tr  class="noBorder">
  <td><span class="circle">1A</span></td>
  <td><input type="text" class="amnt" value="<?php echo number_format($a1,2);?>"/></td>
  </tr>
  <tr  class="noBorder">
  <td><span class="circle">4</span></td>
  <td><input type="text" class="amnt" id="4tax" /></td>
  </tr>
  <tr  class="noBorder">
  <td><span class="circle">5A</span></td>
  <td><input type="text" class="amnt" id="5a" /></td>
  </tr>
  <tr  class="noBorder">
  <td><span class="circle">7</span></td>
  <td><input type="text" name="7"  class="amnt"/></td>
  </tr>
  <tr  class="noBorder">
  <td><span class="circle">7A</span></td>
  <td><input type="text" name="7a" class="amnt" /></td>
  </tr>
  <tr  class="noBorder">
  <td>1A+4+5A+7+7A</td>
  <td><span class="circle">8A</span></td>
  <td>
<input type="text" id="8a" />
  </td>
  </tr>

Jquery

$(".amnt").on("keydown keyup", function() {
        calculateSum();
    });
function calculateSum() {
    var sum2 = 0; 
    $(".amnt").each(function() {
        //add only if the value is number
        if (!isNaN(this.value) && this.value.length != 0) {
            sum2 += parseFloat(this.value);
            //$(this).css("background-color", "#FEFFB0");
        }

    });

}

Output: 8A=1A+4+5A+7+7A enter image description here

Solution

  • Please check this one:-

    $(".amnt").on("keydown keyup", function() {
    calculateSum();
});
function calculateSum() {
var sum2 = 0; 
$(".amnt").each(function() {
    //add only if the value is number
    if (this.value.indexOf(',') > -1) { 
      sum2  += parseFloat(this.value.split(",").join(""));
    }else if(!isNaN(this.value) && this.value.length != 0) {
        sum2 += parseFloat(this.value);
        $("#sum").text(sum2).css("background-color", "#FEFFB0");
    }
});

}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type = "text" class= "amnt" value = "8,133,231.17"><br/>
<input type = "text" class= "amnt" value = ""><br/>
<input type = "text" class= "amnt" value = ""><br/>
<div id = "sum"></div>