Search code examples
javascriptjqueryhtmlcalculated-fieldjquery-calculation

JavaScript calculation when items are deleted

I have a problem when I remove a row from my table. I have a function that calculates the total price, sub-total etc, which works fine.

However if I remove a row it will not re-calculate it i.e. remove the cost.

1) How can I fix this?
2) How can I get NaN to not appear in the "Total Price" column - FIXED
3) I am no expert with JavaScript, so also any help would be greatly appreciated on improving the existing code!

EDIT: included the x's to delete rows in code snippet (the issue is when you enter values in a row, it calculates them, then when you delete the row it doesn't take away the values from the total)

$(function() {
  $(".calculate-rows").keyup(function(event) {
    var total = 0;
    $(".calculate-rows").each(function() {
      var gtotal = 0;
      $(this).find(".rows").each(function() {
        var qty = parseFloat($(this).find(".quantity").val());
        var rate = parseFloat($(this).find(".unit-price").val());
        if (isNaN(qty)) {
          qty = 0;
        }
        if (isNaN(rate)) {
          rate = 0;
        }
        var subtotal = qty * rate;
        var subtotal = qty * rate;
        $(this).find(".total-price").val(subtotal.toFixed(2));
        if (!isNaN(subtotal))
          gtotal += subtotal;
        $(".subtotal").html("£" + gtotal.toFixed(2));
        var discount = $('.discount').val();
        var discount = ((gtotal / 100) * discount);
        var total = (gtotal - discount).toFixed(2);
        if (!isNaN(total))
          $(".total-price").html("£" + total);
      });
    });
  });
});

var wrapper = $('#addrow');
var newitem = $('.newitem');
var removeitem = $('.removeitem');
$(newitem).click(function(e) {
  e.preventDefault();
  $newrow = $('<tr class="rows"><td style="border-top: none;"><input class="form-control" type="text" name="name" required></td><td style="border-top: none;"><textarea class="form-control" rows="1" name="description"></textarea></td><td style="border-top: none;"><input class="text-center form-control quantity" type="text" value="" name="quantity"></td><td style="border-top: none;"><input class="text-center form-control unit-price" type="text" value="" name="unit_price"></td><td style="border-top: none;"><input class="form-control text-center total-price" type="text" value="0.00" readonly></td><td style="border-top: none;" class="text-center"><a class="removeitem" href="#"><i class="fa fa-times"></i></a></td></tr>');
  $(wrapper).append($newrow);
  $newrow.on("click", "a", function(e) {
    e.preventDefault();
    $(this).parent().parent().remove();
  });
});
$(removeitem).click(function(e) {
  e.preventDefault();
  $(this).parent().parent().remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<div class="table-responsive calculate-rows">
  <table class="table">
    <thead>
      <a href="#" class="btn newitem btn-primary tooltip-primary"><i class="fa fa-plus"></i> New Item</a>
      <tr>
        <th style="width:25%;">Item</th>
        <th style="width:41%;">Description</th>
        <th style="width:10%;" class="text-center">Quantity</th>
        <th style="width:10%;" class="text-center">Unit Price (&#163;)</th>
        <th style="width:10%;" class="text-center">Total Price (&#163;)</th>
        <th style="width:4%;"></th>
      </tr>
    </thead>
    <tbody id="addrow">
      <tr class="rows">
        <td style="border-top: none;">
          <input class="form-control" type="text" name="name" required>
        </td>
        <td style="border-top: none;">
          <textarea class="form-control" rows="1" name="description"></textarea>
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control quantity" type="text" value="" name="quantity">
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control unit-price" type="text" value="" name="unit_price">
        </td>
        <td style="border-top: none;">
          <input class="form-control text-center total-price" type="text" value="0.00" readonly>
        </td>
        <td style="border-top: none;" class="text-center"><a class="removeitem" href="#"><i class="fa fa-times"></i></a>
        </td>
      </tr>
      <tr class="rows">
        <td style="border-top: none;">
          <input class="form-control" type="text" name="name" required>
        </td>
        <td style="border-top: none;">
          <textarea class="form-control" rows="1" name="description"></textarea>
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control quantity" type="text" value="" name="quantity">
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control unit-price" type="text" value="" name="unit_price">
        </td>
        <td style="border-top: none;">
          <input class="form-control text-center total-price" type="text" value="0.00" readonly>
        </td>
        <td style="border-top: none;" class="text-center"><a class="removeitem" href="#"><i class="fa fa-times"></i></a>
        </td>
      </tr>
      <tr class="rows">
        <td style="border-top: none;">
          <input class="form-control" type="text" name="name" required>
        </td>
        <td style="border-top: none;">
          <textarea class="form-control" rows="1" name="description"></textarea>
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control quantity" type="text" value="" name="quantity">
        </td>
        <td style="border-top: none;">
          <input class="text-center form-control unit-price" type="text" value="" name="unit_price">
        </td>
        <td style="border-top: none;">
          <input class="form-control text-center total-price" type="text" value="0.00" readonly>
        </td>
        <td style="border-top: none;" class="text-center"><a class="removeitem" href="#"><i class="fa fa-times"></i></a>
        </td>
      </tr>

    </tbody>
  </table>
  <table class="table invoice-table text-right">
    <tbody class="totals">
      <tr>
        <td style="border-top: none;">Sub Total:</td>
        <td style="border-top: none;"><strong class="subtotal">&#163;0.00</strong>
        </td>
      </tr>
      <tr>
        <td style="border-top: none;">Discount:</td>
        <td style="width:20%; border-top: none;">
          <div class="fm-group input-group" style="margin-bottom:0px">
            <span class="input-group-addon">%</span>
            <input type="number" class="form-control text-right discount" value="0">
          </div>
        </td>
      </tr>
      <tr>
        <td style="border-top: none;">VAT:</td>
        <td style="border-top: none;"><strong>&#163;0</strong>
        </td>
      </tr>
      <tr>
        <td style="border-top: none;">Amount Due:</td>
        <td style="border-top: none;"><strong class="total-price">&#163;0</strong>
        </td>
      </tr>

    </tbody>
  </table>

</div>

Solution

  • In order for your calculation to work, when you remove a row, wrap your calculation logic in a function calculate() and call it when you remove a row.

    Regarding the NaN, you just to ensure that when the text boxes for are blank for Quantity and Unit Rate, the variables qty and rate should default to 0.

    $(function() {
  $(".calculate-rows").keyup(function(event) {
    calculate();
  });
});

function calculate() {
    var total = 0;
    $(".calculate-rows").each(function() {
      var gtotal = 0;
      $(this).find(".rows").each(function() {
        var qty = parseFloat($(this).find(".quantity").val());
        var rate = parseFloat($(this).find(".unit-price").val());
          if (isNaN(qty) ) qty = 0;             
          if (isNaN(rate) ) rate = 0;

        var subtotal = qty * rate;
        $(this).find(".total-price").val(subtotal.toFixed(2));
        if (!isNaN(subtotal))
          gtotal += subtotal;
        $(".subtotal").html("&#163;" + gtotal.toFixed(2));
        var discount = $('.discount').val();
        var discount = ((gtotal / 100) * discount);
        var total = (gtotal - discount).toFixed(2);
        if (!isNaN(total))
          $(".total-price").html("&#163;" + total);
      });
    });
}

var wrapper = $('#addrow');
var newitem = $('.newitem');
var removeitem = $('.removeitem');
$(newitem).click(function(e) {
  e.preventDefault();
  $newrow = $('<tr class="rows"><td style="border-top: none;"><input class="form-control" type="text" name="name" required></td><td style="border-top: none;"><textarea class="form-control" rows="1" name="description"></textarea></td><td style="border-top: none;"><input class="text-center form-control quantity" type="text" value="" name="quantity"></td><td style="border-top: none;"><input class="text-center form-control unit-price" type="text" value="" name="unit_price"></td><td style="border-top: none;"><input class="form-control text-center total-price" type="text" value="0.00" readonly></td><td style="border-top: none;" class="text-center"><a class="removeitem" href="#"><i class="fa fa-times"></i></a></td></tr>');
  $(wrapper).append($newrow);
  $newrow.on("click", "a", function(e) {
    e.preventDefault();
    $(this).parent().parent().remove();
      calculate();
  });
});
$(removeitem).click(function(e) {
  e.preventDefault();
  $(this).parent().parent().remove();
    calculate();
});