0

I am creating a small script for invoices, I will use it for my own shop. I've created the form with all I need, also you can add new rows (products), but I need help to calculate the sum of all products.

I have to sum the total price of all rows.

The script should get the input from the form and perform the following action:

Quantity * Measure = Total Price of Product

$(document).ready(function(){      
  var postURL = "addmore.php";
  var i=1;  

  $('#add').click(function(){  
       i++;  
       $('#dynamic_field').append('<tr id="row'+i+'" class="dynamic-added"><td width="50%"><input type="text" name="name[]" class="form-control name_list" required="" /></td>  <td width="12.5%"><input type="text" name="quantity[]" class="form-control name_list" required="" /></td>  <td width="12.5%"><input type="text" name="measure[]" class="form-control name_list" required="" /></td>  <td width="12.5%"><input type="text" name="discount[]" class="form-control name_list" required="" /></td>  <td width="12.5%"><input type="text" name="total[]" class="form-control name_list" required="" /></td>  <td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');  
  });


  $(document).on('click', '.btn_remove', function(){  
       var button_id = $(this).attr("id");   
       $('#row'+button_id+'').remove();  
  });  


  $('#submit').click(function(){            
       $.ajax({  
            url:postURL,  
            method:"POST",  
            data:$('#add_product').serialize(),
            type:'json',
            success:function(data)  
            {
                i=1;
                $('.dynamic-added').remove();
                $('#add_product')[0].reset();
                        alert('Record Inserted Successfully.');
            }  
       });  
  });


});  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="add_product" id="add_product">
   <div class="table-responsive">
   <table class="table table-bordered" id="dynamic_field">
      <tr>
         <th>Product</th>
         <th>Quantity</th>
         <th>Measure</th>
         <th>% discount</th>
         <th>Price</th>
      </tr>
      <tr>
         <td width="50%"><input type="text" name="name[]" class="form-control name_list" required="" /></td>
         <td width="12.5%"><input type="text" name="quantity[]" class="form-control name_list" required="" /></td>
         <td width="12.5%"><input type="text" name="measure[]" class="form-control name_list" required="" /></td>
         <td width="12.5%"><input type="text" name="discount[]"class="form-control name_list" required="" /></td>
         <td width="12.5%"><input type="text" name="total[]" class="form-control name_list" required="" /></td>
      </tr>
   </table>
   <button type="button" name="add" id="add" class="btn btn-success">New product</button> 
   <div style="float:right; width: 30%; margin-right: 30px;">
      <div class="row">
         <div class="col-sm-6">
            <p>Total (Wihout VAT):</p>
            <br />
            <p>VAT <input id="fname" onkeyup="getDiscount()" size="1" type="text" /> %</p>
            <br />
            <p>Total (VAT Included)</p>
         </div>
         <div class="col-sm-6" style="background: #eee;  min-height: 100px; text-align: right; padding-right: 10px;">
            <p id="withoutVAT"></p>
            <br />
            <p id="discount"> 0 </p>
            <br />
            <p id="total" style="font-weight: bold; font-size: 16px;"> </p>
         </div>
         <div  class="drag" style="left: 0px; top: 0px; width:10%;  height:10%;"></div>
      </div>
      <!-- <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  -->
   </div>
</form>

js fiddle -> https://jsfiddle.net/hv3a1hcc/

Sphinx
  • 10,519
  • 2
  • 27
  • 45
Vesselina Taneva
  • 115
  • 2
  • 10
  • when do you want to do the computation of price? is it on `quantity` & `measure` input keypress? or when a button is clicked? – Theo Mar 03 '18 at 01:47
  • 1
    Possible duplicate of [How get total sum from input box values using Javascript?](https://stackoverflow.com/questions/13540751/how-get-total-sum-from-input-box-values-using-javascript) – Heretic Monkey Mar 03 '18 at 01:51
  • @Theo I want to be summed on every change on quatity & measure – Vesselina Taneva Mar 03 '18 at 01:54

1 Answers1

0

So basically you need to listen to keyup events of both measure and quantity inputs then update the price input on every trigger.

I changed type of inputs to number to reduce bug as well

here's the code

<script type="text/javascript">
$(document).ready(function() {
  var postURL = "addmore.php";
  var i = 1;

  $('#add').click(function() {
    i++;
    $('#dynamic_field').append('<tr id="row' + i + '" class="dynamic-added"><td width="50%"><input type="text" name="name[]" class="form-control name_list" required="" /></td>  <td width="12.5%"><input type="text" name="quantity[]" class="form-control name_list" required="" /></td>  <td width="12.5%"><input type="text" name="measure[]" class="form-control name_list" required="" /></td>  <td width="12.5%"><input type="number" name="discount[]" class="form-control name_list" required="" /></td>  <td width="12.5%"><input type="number" disabled name="total[]" class="form-control name_list" required="" /></td>  <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>');
  });

  function computeSum() {
    var totalPrice = 0;
    $('input[name="total[]"]').each(function(key, total) {
      totalPrice += parseInt(total.value, 10);
    });
    $('#totalWithoutVat').text(totalPrice)
  }

  $(document).on('click', '.btn_remove', function() {
    var button_id = $(this).attr("id");
    $('#row' + button_id + '').remove();
  });

  $(document).on('keyup', 'input[name="quantity[]"]', function(e) {
    var quantity = $(e.target);
    if (quantity.val()) {
      var tr = quantity.closest('tr');
      var measure = tr.find('input[name="measure[]"]');
      var total = tr.find('input[name="total[]"]');
      total.val(measure.val() * quantity.val());
      computeSum();
    }
  });

  $(document).on('keyup', 'input[name="measure[]"]', function(e) {
    var measure = $(e.target);
    if (measure.val()) {
      console.log(measure.val());
      var tr = measure.closest('tr');
      var quantity = tr.find('input[name="quantity[]"]');
      var total = tr.find('input[name="total[]"]');
      total.val(quantity.val() * measure.val());
      computeSum();
    }
  });

  $('#submit').click(function() {
    $.ajax({
      url: postURL,
      method: "POST",
      data: $('#add_product').serialize(),
      type: 'json',
      success: function(data) {
        i = 1;
        $('.dynamic-added').remove();
        $('#add_product')[0].reset();
        alert('Record Inserted Successfully.');
      }
    });
  });
});
</script>
<form name="add_product" id="add_product">
<div class="table-responsive">
  <table class="table table-bordered" id="dynamic_field">
    <tr>
      <th>Product</th>
      <th>Quantity</th>
      <th>Measure</th>
      <th>% discount</th>
      <th>Price</th>
    </tr>
    <tr>
      <td width="50%"><input type="text" name="name[]" class="form-control name_list" required="" /></td>
      <td width="12.5%"><input type="number" name="quantity[]" class="form-control name_list" required="" /></td>
      <td width="12.5%"><input type="number" name="measure[]" class="form-control name_list" required="" /></td>
      <td width="12.5%"><input type="number" name="discount[]" class="form-control name_list" required="" /></td>
      <td width="12.5%"><input type="text" name="total[]" class="form-control name_list" required="" /></td>
    </tr>
  </table>
  <button type="button" name="add" id="add" class="btn btn-success">New product</button>
  <div style="float:right; width: 30%; margin-right: 30px;">
    <div class="row">
      <div class="col-sm-6">
      <p>Total (Wihout VAT):<span id="totalWithoutVat"></span></p>
        <br />
        <p>VAT <input id="fname" onkeyup="getDiscount()" size="1" type="text" /> %</p>
        <br />
        <p>Total (VAT Included)</p>
      </div>
      <div class="col-sm-6" style="background: #eee;  min-height: 100px; text-align: right; padding-right: 10px;">
        <p id="withoutVAT"></p>
        <br />
        <p id="discount"> 0 </p>
        <br />
        <p id="total" style="font-weight: bold; font-size: 16px;"> </p>
      </div>
      <div class="drag" style="left: 0px; top: 0px; width:10%;  height:10%;"></div>
    </div>
    <!-- <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" />  -->
  </div>
</form>

here's a jsfiddle you can test

Theo
  • 1,932
  • 4
  • 17
  • 40
  • Thank you! How I can calculate the total sum of product if there is discount %? Something like: Quantity * Measure - (if(discountEntered) - x%) = Total Price of Product – Vesselina Taneva Mar 03 '18 at 14:57