PHP number format doesn't allow jquery sum

Question

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

Please find the relevant part of the code... Please post the relevant code or highlight it :) BTW there is no such a thing like a PHP number — B001ᛦ
– B001ᛦ, Commented Feb 15, 2017 at 9:34
Check the markup (rendered html) rather than the PHP to see what's happening. Also, what happens if you change the else if to just an else (temporarily) and uncomment the commented code? — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Feb 15, 2017 at 9:38

Death-is-the-real-truth · Accepted Answer · 2017-02-15 10:17:33Z

3

Javascript can't handle numbers with , in it as thousands separator. It is not a number, it is a human-formatted string. Do as follows

<?php echo number_format($a1, 2, '.', '');?>

UPD. In js you can remove , with this.value.replace(/,/g, "") to remove commas:

parseFloat("12,233.12")
>12
parseFloat("12,233.12".replace(/,/g,""))
>12233.12

$(".amnt").on("keydown keyup", function() {
        calculateSum();
    });
function calculateSum() {
    var sum2 = 0; 
    $(".amnt").each(function() {
        var thevalue = this.value.replace(/,/g,'');

        if (!isNaN(thevalue ) && thevalue .length != 0) {
            sum2 += parseFloat(thevalue);
            $("#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>

edited Feb 15, 2017 at 10:17

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

answered Feb 15, 2017 at 9:39

shukshin.ivan

11.4k4 gold badges58 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Zendie Over a year ago

Thanks for the reply. i have tried to change sum2 += parseFloat((this.value).replace(",","")); But didn't work.

Zendie Over a year ago

$(".amnt").each(function() { sum2 += parseFloat((this.value).replace(",",""));}); I did this. But didnt work

shukshin.ivan Over a year ago

Please, comment when downvoting. Doesn't it sum as OP wishes to?

Death-is-the-real-truth Over a year ago

@shukshin.ivan take care that when you edit some-one code, then check it will work properly. Otherwise don't touch please

Death-is-the-real-truth Over a year ago

@shukshin.ivan it's OK, but take care in future.

|

Death-is-the-real-truth · Accepted Answer · 2017-02-15 10:09:33Z

2

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>

edited Feb 15, 2017 at 10:09

answered Feb 15, 2017 at 9:47

Death-is-the-real-truth

72.3k10 gold badges59 silver badges105 bronze badges

Comments

Vee Joe · Accepted Answer · 2018-08-27 07:55:09Z

I will advice you to display the numbers with Javascript instead of PHP. First set the value="" in your html

    $(document).ready(function() {
    //use json_encode to make the php script readable by javascript
     var amntval = Number(<?php echo json_encode($a1,2);?>); 

    //display the value in the amnt field 
    $(".amnt").val(amntval.toLocaleString('en'));

    //now run your calculations
    $(".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");
    }

});

}


});

This worked for me and I have not tested it with your codes but I believe it should work!

Collectives™ on Stack Overflow

PHP number format doesn't allow jquery sum

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related