javascript - Appended row calculation using jquery not working

Question

I am trying to calculate in appended rows values. But, calculation scripts not working. Is there any confliction between jquery-slim and jquery? I am using bootstrap 4 and laravel framework for this project. I tried various jquery scripts for this calculation. But, did not work any. Would someone help me to complete the calcuation please.

var item_row = '{{ $item_row }}';

function addItem() {
  html = '<tr id="item-row-' + item_row + '">';
  html += '<td class="text-center" style="vertical-align: middle;">';
  html += '<button type="button" onclick="$(\'#item-row-' + item_row + '\').remove()" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>';
  html += '</td>';
  html += '<td>';
  html += '<select class="form-control select2" name="item[' + item_row + '][item_id]" id="item-item_id-' + item_row + '">';
  html += '<option selected="selected" value="">Select</option>';
  html += '<option value="item1">item1</option>';
  html += '<option value="item2">item2</option>';
  html += '<option value="item3">item3</option>';
  html += '<option value="item4">item4</option>';
  html += '<input name="item[' + item_row + '][item_id]" type="hidden" id="item-id-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][unit_price]" type="text" id="item-unit_price-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][purchase_price]" type="text" id="item-purchase_price-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][tax_rate]" type="text" id="item-tax_rate-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][discount_amount]" type="text" id="item-discount_amount-' + item_row + '">';
  html += '  </td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][sale_price]" type="text" id="item-sale_price-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][quantity]" type="text" id="item-quantity-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][return_quantity]" type="text" id="item-return_quantity-' + item_row + '">';
  html += '</td>';
  html += '<td>';
  html += '<input class="form-control text-right"   required="required" name="item[' + item_row + '][total_price]" type="text" id="item-total_price-' + item_row + '">';
  html += '</td>';
  html += '</tr>';
  $('#items tbody #addItem').before(html);
  item_row++;
}

function update_amounts() {
  var sum = 0.0;
  $('#items > tbody  > tr').each(function() {
    var qty = $(this).find('.quantity').val();
    var price = $(this).find('.sale_price').val();
    var amount = (qty * price)
    sum += amount;
    $(this).find('.sub_total').text('' + amount);
  });
  //just update the total to sum  
  $('.grand_total').text(sum);
}
$('.quantity').change(function() {
  update_amounts();
});

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<table class="table table-bordered table-responsive" id="items">
  <thead>
    <tr style="background-color: #f9f9f9;">
      <th width="5%" class="text-center">Actions</th>
      <th width="10%" class="text-left">Item</th>
      <th width="8%" class="text-left">Unit Price</th>
      <th width="11%" class="text-left">Purchase Price</th>
      <th width="8%" class="text-left">Tax Rate</th>
      <th width="5%" class="text-right">Discount(%)</th>
      <th width="10%" class="text-right">Sale Price</th>
      <th width="5%" class="text-right">Quantity</th>
      <th width="13%" class="text-right">Return Quantity</th>
      <th width="10%" class="text-right">Total Price</th>
    </tr>
  </thead>
  <tbody>
    <?php $item_row = 0; ?>
    <tr id="item-row-{{ $item_row }}">
      <td class="text-center" style="vertical-align: middle;">
        <button type="button" onclick="$(\'#item-row-' + item_row + '\').remove();" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
      </td>
      <td>
        <select class="form-control select2 typeahead" required="required" name="item[{{ $item_row }}][item_id]" id="item-item_id-{{ $item_row }}">
          <option>Select</option>
          <option value="item1">item1</option>
          <option value="item2">item2</option>
          <option value="item3">item3</option>
          <option value="item4">item4</option>
        </select>
        <input name="item[{{ $item_row }}][item_id]" type="hidden" id="item-id-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][unit_price]" type="text" id="item-unit_price-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][purchase_price]" type="text" id="item-purchase_price-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][tax_rate]" type="text" id="item-tax_rate-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][discount_amount]" type="text" id="item-discount_amount-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right sale_price" required="required" name="item[{{ $item_row }}][sale_price]" type="text" id="item-sale_price-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right quantity" required="required" name="item[{{ $item_row }}][quantity]" type="text" id="item-quantity-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][return_quantity]" type="text" id="item-return_quantity-{{ $item_row }}">
      </td>
      <td>
        <input class="form-control text-right" required="required" name="item[{{ $item_row }}][total_price]" type="text" id="item-total_price-{{ $item_row }}">
      </td>
    </tr>

    <?php $item_row++; ?>
    <tr id="addItem">
      <td class="text-center"><button type="button" onclick="addItem();" title="Add" class="btn btn-xs btn-primary" data-original-title="Add"><i class="fa fa-plus"></i></button></td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Sub Total</strong></td>
      <td>
        <input type="text" name="sub_total" id="sub_total" class="form-control text-right sub_total">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Tax Amount</strong></td>
      <td>
        <input type="text" name="tax_amount" id="tax_amount" class="form-control text-right">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Discount Amount</strong></td>
      <td>
        <input type="text" name="discount_amount" id="discount_amount" class="form-control text-right">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Grand Total</strong></td>
      <td>
        <input type="text" name="grand_total" id="grand_total" class="form-control text-right grand_total">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Cash Received</strong></td>
      <td>
        <input type="text" name="cash_received" id="cash_received" class="form-control text-right">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right align-middle"><strong>Cash Refund</strong></td>
      <td>
        <input type="text" name="cash_refund" id="cash_refund" class="form-control text-right">
      </td>
    </tr>
    <tr>
      <td colspan="8"></td>
      <td class="text-right"><a href="" class="btn btn-warning">Clear</a></td>
      <td><button type="submit" class="btn btn-primary">Save</button></td>
    </tr>
  </tbody>
</table>

score 0 · Accepted Answer

Although, your question was somewhat unclear and incomplete, I've managed to find out the thing that was causing error, which is

$('#items > tbody  > tr').each(function() {
});

Above, includes all tr in tbody meaning including the rows having:

Sub Total, Tax Amount, Discount Amount, Grand Total, Cash Received & Cash Refund.

which doesn't have quantity input so, which causes an undefined error that can be seen when you log the qty variable in the console. I've corrected your snippet for the given error and simply log the calculation (you can add those in input value yourself), which is attached it in my answer for reference.

Suggestion: You should attach the similar function for changing sale price, in case user fills the quantity first or otherwise handle this exception.

var item_row = '{{ $item_row }}';
  function addItem(){
    html  = '<tr class="data_entry" id="item-row-' + item_row + '">';
    html += '<td class="text-center" style="vertical-align: middle;">';
    html += '<button type="button" onclick="$(\'#item-row-' + item_row + '\').remove()" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>';
    html += '</td>';
    html += '<td>';
    html += '<select class="form-control select2" name="item[' + item_row + '][item_id]" id="item-item_id-' + item_row + '">';
    html += '<option selected="selected" value="">Select</option>';
    html += '<option value="item1">item1</option>';
    html += '<option value="item2">item2</option>';
    html += '<option value="item3">item3</option>';
    html += '<option value="item4">item4</option>';
    html += '<input name="item[' + item_row + '][item_id]" type="hidden" id="item-id-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][unit_price]" type="text" id="item-unit_price-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][purchase_price]" type="text" id="item-purchase_price-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][tax_rate]" type="text" id="item-tax_rate-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][discount_amount]" type="text" id="item-discount_amount-' + item_row + '">';
    html += '  </td>';
    html += '<td>';
    html += '<input class="form-control text-right sale_price" required="required" name="item[' + item_row + '][sale_price]" type="text" id="item-sale_price-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right quantity" required="required" name="item[' + item_row + '][quantity]" type="text" id="item-quantity-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right" required="required" name="item[' + item_row + '][return_quantity]" type="text" id="item-return_quantity-' + item_row + '">';
    html += '</td>';
    html += '<td>';
    html += '<input class="form-control text-right"   required="required" name="item[' + item_row + '][total_price]" type="text" id="item-total_price-' + item_row + '">';
    html += '</td>';
    html += '</tr>';
    $('#items tbody #addItem').before(html);
    item_row++;
  }
function update_amounts(){
        var sum = 0.0;
        $('#items > tbody  > tr.data_entry').each(function() {
            var qty = $(this).find('.quantity').val();
             // console.log(qty);
            var price = $(this).find('.sale_price').val();
            var amount = (qty*price)
            sum+=amount;
            // console.log(price);
             console.log("Sub Total: " + amount);         
            $('.sub_total').text(''+amount);
            
    });
    console.log("Grand Total: " + sum);
    
    //just update the total to sum  
    $('.grand_total').text(sum);
   }
     $('table#items tbody').on("change","tr .quantity",function() {
           //var qty = $(this).val();   
           // alert("Change");
           update_amounts();
     });

<link href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>

<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>



<table class="table table-bordered table-responsive" id="items">
                    <thead>
                      <tr style="background-color: #f9f9f9;">
                        <th width="5%"  class="text-center">Actions</th>
                        <th width="10%" class="text-left">Item</th>
                        <th width="8%" class="text-left">Unit Price</th>
                        <th width="11%" class="text-left">Purchase Price</th>
                        <th width="8%" class="text-left">Tax Rate</th>
                        <th width="5%" class="text-right">Discount(%)</th>
                        <th width="10%" class="text-right">Sale Price</th>
                        <th width="5%" class="text-right">Quantity</th>
                        <th width="13%" class="text-right">Return Quantity</th>
                        <th width="10%" class="text-right">Total Price</th>
                      </tr>
                    </thead>
                    <tbody>
                      <?php $item_row = 0; ?>
                      <tr class="data_entry" id="item-row-{{ $item_row }}">
                        <td class="text-center" style="vertical-align: middle;">
                          <button type="button" onclick="$(\'#item-row-' + item_row + '\').remove();" title="Delete" class="btn btn-xs btn-danger"><i class="fa fa-trash"></i></button>
                        </td>
                        <td>
                          <select class="form-control select2 typeahead" required="required" name="item[{{ $item_row }}][item_id]" id="item-item_id-{{ $item_row }}">
                            <option>Select</option>
                            <option value="item1">item1</option>
                            <option value="item2">item2</option>
                            <option value="item3">item3</option>
                            <option value="item4">item4</option>
                          </select>
                          <input name="item[{{ $item_row }}][item_id]" type="hidden" id="item-id-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right" required="required" name="item[{{ $item_row }}][unit_price]" type="text" id="item-unit_price-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right" required="required" name="item[{{ $item_row }}][purchase_price]" type="text" id="item-purchase_price-{{ $item_row }}">
                        </td>
                        <td>
                           <input class="form-control text-right" required="required" name="item[{{ $item_row }}][tax_rate]" type="text" id="item-tax_rate-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right" required="required" name="item[{{ $item_row }}][discount_amount]" type="text" id="item-discount_amount-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right sale_price" required="required" name="item[{{ $item_row }}][sale_price]" type="text" id="item-sale_price-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right quantity" required="required" name="item[{{ $item_row }}][quantity]" type="text" id="item-quantity-{{ $item_row }}">
                        </td>
                        <td>
                          <input class="form-control text-right" required="required" name="item[{{ $item_row }}][return_quantity]" type="text" id="item-return_quantity-{{ $item_row }}">
                        </td>
                        <td>
                           <input class="form-control text-right" required="required" name="item[{{ $item_row }}][total_price]" type="text" id="item-total_price-{{ $item_row }}"  >
                        </td>
                      </tr>

                      <?php $item_row++; ?>
                      <tr id="addItem">
                          <td class="text-center"><button type="button" onclick="addItem();" title="Add" class="btn btn-xs btn-primary" data-original-title="Add"><i class="fa fa-plus"></i></button></td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Sub Total</strong></td>
                        <td>
                          <input type="text" name="sub_total" id="sub_total"   class="form-control text-right sub_total">

                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Tax Amount</strong></td>
                        <td>
                          <input type="text" name="tax_amount" id="tax_amount"   class="form-control text-right">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Discount Amount</strong></td>
                        <td>
                          <input type="text" name="discount_amount" id="discount_amount"   class="form-control text-right">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Grand Total</strong></td>
                        <td>
                          <input type="text" name="grand_total" id="grand_total"   class="form-control text-right grand_total">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Cash Received</strong></td>
                        <td>
                          <input type="text" name="cash_received" id="cash_received" class="form-control text-right">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right align-middle"><strong>Cash Refund</strong></td>
                        <td>
                          <input type="text" name="cash_refund" id="cash_refund"   class="form-control text-right">
                        </td>
                      </tr>
                      <tr>
                        <td colspan="8"></td>
                        <td class="text-right"><a href="" class="btn btn-warning">Clear</a></td>
                        <td><button type="submit" class="btn btn-primary">Save</button></td>
                      </tr>
                    </tbody>
                  </table>

score 0 · Accepted Answer

please try below changes

$('.quantity').change(function() {
   update_amounts();
});


$(document).on("change",".quantity",function() {
   update_amounts();
});

and add class "product_row" tr in html

  <tr id="item-row-<?php echo $item_row; ?>" class="product_row">

also in addItem function

 html  = '<tr id="item-row-' + item_row + '" class="product_row">';

change the each function

 $('#items > tbody  > tr.product_row').each(function() {
            var qty = $(this).find('.quantity').val();
            var price = $(this).find('.sale_price').val();
            var amount = (qty*price)
            sum+=amount;
            $('.sub_total').val(amount);
    });

javascript - Appended row calculation using jquery not working

2 回答 2

Related