Why is this HTML table calculation not showing the total?

Question

Just started diving into JS and Jquery and I can't find out why this is not calculating the table's qty by price when the function is called without any parameter passed.

function add_to_total(el) {
  if (el) {
    var parent = $(el).closest('tr');
    var price = parent.find('.price').val();
    var qty = parent.find('.qty').val();
    if (price == '' || qty == '') {
      alert('Please make sure that the price and metros are informed correctly.');
      return;
    }
    var total = (price * qty);
    total = total.toFixed(2);
    parent.find('.total_price').html("$" + total);
  } else {


//THIS IS THE PIECE THAT DOESN'T SEEM TO RUN
    $("#tableRows tr").each(function() {
      $(this).find('.total_price').val(parseFloat($(this).find('.qty').val()) * parseFloat($(this).find('.price').val()));
    });
    console.log('Row Total: ' + $(this).find('.total_price').val(parseFloat($(this).find('.qty').val()) * parseFloat($(this).find('.price').val())))
  }

  var gridTotal = 0;
  $(".total_price").each(function(index, item) {
    var val = parseFloat($(this).html().replace(/[$,]/g, ''));
    if (isNaN(val)) val = 0;
    gridTotal += val;
  });
  $('.total').html('$' + gridTotal.toFixed(2));
}

<table class="table table-hover table-vcenter" id="dtable">
  <thead>
    <tr>
      <th style="width:7%">Precio/m (COP)</th>
      <th style="width:8%">Metros (m)</th>
      <th style="width:10%">Precio Total sin IVA</th>
    </tr>
  </thead>
  <tbody id="tableRows">
    <tr>
      <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="3.91" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="124" onchange="add_to_total(this)"></td>
      <td class="total_price"><strong>$0.00</strong></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td id="totalTitle" colspan="8" align="right"><strong>Total:</strong></td>
      <td id="totalValue" class="total">$0.00</td>
    </tr>
  </tfoot>
</table>
<script>
//add_to_total()
</script>

...and I could use a helping hand.

Hi, @trincot! Thanks for your comment. The function ```add_to_total()``` is called as the table loads (real life), but the commented piece retrurns an object instead of placing the total for that row and the Grand Total. — onit, Jul 23 '22 at 13:40
See my comment on the accepted answer, which is (I think) not a solution. — Pointy, Jul 23 '22 at 14:00

score 1 · Answer 1 · answered Jul 23 '22 at 14:31

You have not written the add_to_total function correctly, use the function I have created, it will run fast and correctly.

        function add_to_total() {
            let price = $(".price").val(),
                qty = $(".qty").val(),
                totalPrice = $(".total_price"),
                totalValue = $(".total"),
                calPrice = (price * qty).toFixed(2); // calculate price

            if (price || qty) {
                totalPrice.text(`$${calPrice}`)
                totalValue.text(`$${calPrice}`)
            } else {
                alert('Please make sure that the price and metros are informed correctly.');
            }
        }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover table-vcenter" id="dtable">
        <thead>
            <tr>
                <th style="width:7%">Precio/m (COP)</th>
                <th style="width:8%">Metros (m)</th>
                <th style="width:10%">Precio Total sin IVA</th>
            </tr>
        </thead>
        <tbody id="tableRows">
            <tr>
                <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="3.91"
                        onkeyup="add_to_total(this)" onchange="add_to_total(this)"></td>
                <td><input type="number" min="0" class="qty" name="numberInputs" value="124"
                        onkeyup="add_to_total(this)" onchange="add_to_total(this)""></td>
                <td class=" total_price"><strong>$0.00</strong></td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td id="totalTitle" colspan="8" align="right"><strong>Total:</strong></td>
                <td id="totalValue" class="total">$0.00</td>
            </tr>
        </tfoot>
    </table>

Thanks for your answer. It is a lot cleaner! There is the optional parameter, though. I'll improve mine with this one as a reference. — onit, Jul 23 '22 at 17:31

score 0 · Accepted Answer · answered Jul 23 '22 at 13:41

Since total_price is a table cell, you can't use .val() to change it's value. Use .html() or .text(). Val is used for inputs.

function add_to_total(el) {
  if (el) {
    var parent = $(el).closest('tr');
    var price = parent.find('.price').val();
    var qty = parent.find('.qty').val();
    if (price == '' || qty == '') {
      alert('Please make sure that the price and metros are informed correctly.');
      return;
    }
    var total = (price * qty);
    total = total.toFixed(2);
    parent.find('.total_price').html("$" + total);
  } else {

    $("#tableRows tr").each(function() {
      $(this).find('.total_price').text(parseFloat($(this).find('.qty').val()) * parseFloat($(this).find('.price').val()));
    });
    console.log('Row Total: ' + $(this).find('.total_price').val(parseFloat($(this).find('.qty').val()) * parseFloat($(this).find('.price').val())))
  }

  var gridTotal = 0;
  $(".total_price").each(function(index, item) {
    var val = parseFloat($(this).html().replace(/[$,]/g, ''));
    if (isNaN(val)) val = 0;
    gridTotal += val;
  });
  $('.total').html('$' + gridTotal.toFixed(2));
}

add_to_total();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-hover table-vcenter" id="dtable">
  <thead>
    <tr>
      <th style="width:7%">Precio/m (COP)</th>
      <th style="width:8%">Metros (m)</th>
      <th style="width:10%">Precio Total sin IVA</th>
    </tr>
  </thead>
  <tbody id="tableRows">
    <tr>
      <td><input type="number" step="0.01" min="0" class="price" name="numberInputs" value="3.91" onchange="add_to_total(this)"></td>
      <td><input type="number" min="0" class="qty" name="numberInputs" value="124" onchange="add_to_total(this)"></td>
      <td class="total_price"><strong>$0.00</strong></td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td id="totalTitle" colspan="8" align="right"><strong>Total:</strong></td>
      <td id="totalValue" class="total">$0.00</td>
    </tr>
  </tfoot>
</table>

Thank you very much. Sad it got closed though! So much to absorb when you're new to something, you end missing some obvious points. Thanks for your time/help! — onit, Jul 23 '22 at 13:46
I'm confused; where in the code in the OP was `.val()` used incorrectly? — Pointy, Jul 23 '22 at 13:52
@onit I don't think this is the answer. I think the problem is that you initialize the page with `` around the initial $0.00 total, so `.html()` returns that tag and `parseFloat()` returns `NaN`. — Pointy, Jul 23 '22 at 13:53
Hi, @Pointy! The ```$0,00``` is just a placeholder, which gets replaced by the result of the calculation either when the table loads with existing data and/or it the user changes either the ```price``` or the ```qty```. It worked fine when I changed it from ```val()``` to ```text()```. Thanks for your observation! — onit, Jul 23 '22 at 14:02
It worked when you changed it because `.text()` ignores the `` tag, and just gets the text inside. The "price" and "qty" elements are `` elements, so `.val()` is correct (and `.text()` won't work).\ — Pointy, Jul 23 '22 at 14:06

Why is this HTML table calculation not showing the total?

2 Answers2