jautocalc, the sum of item_total is returning back to zero every time I add new rows

[ron13315]

Hi guys, im using this jautocalc https://github.com/c17r/jAutoCalc

I cant get to work the sum of jAutoCalc="SUM({#item_total})" because everytime I add new rows it return back to zero.

<form id="cart" action="{{ route('items.store') }}" method="POST">
<table name="cart">
@csrf
<label name="customer" for="customer">Customer</label>
<select name="customer">
  <option value="customer 1">customer 1</option>
  <option value="customer 2">customer 2</option>
  <option value="customer 3">customer 3</option>
  <option value="customer 4">customer 4</option>
</select>

<tr class="line_items">
<td><button class="row-remove">Remove</button></td>
<td>
<select name="items[]">
@foreach ($itemlists as $itemlist)
<option value="{{ $itemlist->itemname }}">{{ $itemlist->itemname }}</option>
@endforeach
</select>
</td>
<td><input type="text" name="items[]" id="price" value="0"></td>
<td><input type="text" name="items[]" id="kilo" value="0"></td>
<td><input type="text" name="items[]" id="item_total" value="" jAutoCalc="{#price} * {#kilo}"></td>
</tr>

<tr>
<td><input type="text" name="total" value="" class="form-control" jAutoCalc="SUM({#item_total})"></td>
</tr>
<tr>
<td colspan=""><button class="row-add">Add Row</button></td>
</tr>
</table>
<button name="submit" type="submit">submit</button>
</form>
 
    
<script type="text/javascript">
$(function() {

function autoCalcSetup() {
    $('form#cart').jAutoCalc('destroy');
    $('form#cart tr.line_items').jAutoCalc({keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true});
    $('form#cart').jAutoCalc({decimalPlaces: 2});
}
autoCalcSetup();


$('button.row-remove').on("click", function(e) {
    e.preventDefault();

    var form = $(this).parents('form')
    $(this).parents('tr').remove();
    autoCalcSetup();

});

$('button.row-add').on("click", function(e) {
    e.preventDefault();

    var $table = $(this).parents('table');
    var $top = $table.find('tr.line_items').first();
    var $new = $top.clone(true);

    $new.jAutoCalc('destroy');
    $new.insertBefore($top);
    $new.find('input[type=text]').val('');
    autoCalcSetup();
});
});
</script>

 

[Danlucy]

You need echo the value of item_total by PHP before using jQuery to showing the result. That will check if error from jQuery or the value is not returned.