CODEWITHSUNDEEP
javascriptjquery
bumperbox
bumperbox

Reputation: 10214

jquery not calculating sum as expected

I started off by using this solution, but I can't seem to get it to work

jQuery calculate sum of values in all text fields

Here is an example of my html

<table>
  <tbody>
    <tr id="tr_affiliation_15159">
      <td class="right col_aff_amount">15.00</td>
    </tr>
    <tr id="tr_affiliation_15189">
      <td class="right col_aff_amount">15.00</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td class="total"></td>
    </tr>
  </tfoot>
</table>

This is my javascript function

function removeRow(id) {
  $("#tr_affiliation_" + id).fadeOut("slow", function() {
    $("#tr_affiliation_" + id).remove();

    // recalc total
    var total = 0;

    $('.col_aff_amount').each(function() {
      // i have tried .text(), and .html() as well as .val() but it doesn't seem to make any difference
      var val = parseFloat($(this).val());
      console.log(val);
      total += val;
  });

  $("td.total").html(parseFloat(total).toFixed(2));

}

My console log just shows a long list of NaN, why can't it extract the number?

Upvotes: 1

Views: 497

Answers (1)

Ram
Ram

Reputation: 144669

you should use text() for elements other than form elements like input and textarea, also as you are doing calculation, define the variable val with an integer value before calculatiing:

$(document).ready(function(){
   // ...
   var val = 0;
   val = parseInt($(this).text(), 10);
  // ...
})

DEMO

Upvotes: 2

Related Questions