动态计算总和和增值税

Question

我正在为发票创建一个小脚本，我会将它用于我自己的商店。我已经创建了我需要的所有表单，也可以添加新行（产品），但我需要帮助来计算所有产品的总和。

我必须总计所有行的总价。

该脚本应从表单获取输入并执行以下操作：

数量*尺寸=产品总价

$(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小提琴 - > https://jsfiddle.net/hv3a1hcc/

Answer 1

所以基本上你需要听keyup和measure输入的quantity事件然后更新每个触发器的价格输入。

我将type的输入更改为number以减少错误

这是代码

<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>

这是你可以测试的jsfiddle