如何使用jquery从sales form中追加的行计算总金额

Question

在下面的模式表单图像中，如何进行jquery计算以从每个附加的行中获得总金额值？工作流程是当我选择食品项目(onchange事件)时，ajax调用将当前汇率返回到textbox-1。当我键入一个数字数量(keyup事件)时，它会计算qty*rate并在textbox-2中显示值。当我单击加号按钮时，它会添加带有选择和数量输入的新行。在这里，我使用id名称进行计算。计算代码如下：

$(document).on('keyup', '#entrysalesqty', function() {  
        
        var t=0;
       var a = $("#ratexqty").val($(this).val() * $("#getrate").val());
      if(isNaN(a)){
        
      }else{
       t = a + t;
      }
      $("#totalamount").val(t);
      });

下面是htmlcode

<!--Add sales Modal -->
              <div class="modal fade" id="addTakeOrderModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
                <div class="modal-dialog modal-dialog-centered" role="document">
                  <div class="modal-content">
                    <div class="modal-header">
                      <h5 class="modal-title">Take Food Order</h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                          <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <form method="POST" id="add-takeorder-form-data">
                      <div class="modal-body px-4">
                          <div class="form-group">
                            <input type="text" name="entrysalesdate" id="entrysalesdate" class="form-control cursormove13" required autocomplete="off">
                          </div>
                          <div class="form-group">
                            <input type="text" name="entrysalesbill" id="entrysalesbill" class="form-control cursormove13" required autocomplete="off">
                          </div>
                          <div class="form-group">
                            <table id="ordertable" class="ordertable">
                              <tbody>
                                <tr>
                                <th>
                                <select class="form-control cursormove13 entrysalesfi" name="entrysalesfi[]" id="entrysalesfi" required style="width: 100%;">
                                  <option selected>Select food item</option>
                                  <?php 
                                    include_once "actionentries.php";
                                    echo $db2->getFoodList();
                                  ?>
                                </select>
                                </th>
                                <th><input type="text" name="entrysalesqty[]" id="entrysalesqty" class="form-control cursormove13" placeholder="Quantity**" required autocomplete="off"></th>
                                <th><button type="button" name="addrow" class="btn btn-success addrow cursormove13" id="addrow"><i class="fa fa-plus"></i></button></th>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                          <div class="form-group">
                          <input class="form-control getrate" name="getrate" id="getrate" type="text">
                          <input class="form-control ratexqty" name="ratexqty" id="ratexqty" type="text">
                          </div>
                          <div class="form-group" id="showRate">
                            <div class="input-group">
                              <div class="input-group-prepend">
                              <span class="input-group-text">Total Amount to pay in MYR</span>
                              </div>                      
                                <input class="form-control" name="totalamount" id="totalamount" type="text" value="" readonly>
                            </div>
                          </div>                         
                      </div>
                      <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <input type="submit" name="entrysalesinsert" id="entrysalesinsert" value="Save" class="btn btn-danger cursormove13">
                      </div>
                    </form>
                  </div>
                </div>
              </div><!-- /.Add sales Modal -->

请提前解决这个问题，谢谢。

​

​

Answer 1

function calculateSum(){
      var sum = 0;
      $('.ratexqty').each(function() {
        if (!isNaN(this.value) && this.value.length != 0) {
        sum += parseFloat(this.value);
      }   
      });
        $('#totalamount').val(sum.toFixed(2));             
      }

使用上述方法来解决此问题

Answer 2

请考虑以下内容。

​

$(function() {
  $("#addTakeOrderModal").on('keyup', '#entrysalesqty', function() {
    var t = 0;
    var r = parseInt($(this).val()) * parseFloat($("#getrate").val());
    $("#ratexqty").val(r.toFixed(2));
    t += parseFloat($("#ratexqty").val());
    $("#totalamount").val(t.toFixed(2));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--Add sales Modal -->
<div class="modal fade" id="addTakeOrderModal" tabindex="-1" role="dialog" aria-labelledby="modelTitleId" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Take Food Order</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      </div>
      <form method="POST" id="add-takeorder-form-data">
        <div class="modal-body px-4">
          <div class="form-group">
            <input type="text" name="entrysalesdate" id="entrysalesdate" class="form-control cursormove13" required autocomplete="off">
          </div>
          <div class="form-group">
            <input type="text" name="entrysalesbill" id="entrysalesbill" class="form-control cursormove13" required autocomplete="off">
          </div>
          <div class="form-group">
            <table id="ordertable" class="ordertable">
              <tbody>
                <tr>
                  <th>
                    <select class="form-control cursormove13 entrysalesfi" name="entrysalesfi[]" id="entrysalesfi" required style="width: 100%;">
                      <option selected>Select food item</option>
                      <option>PEPSI</option>
                    </select>
                  </th>
                  <th><input type="text" name="entrysalesqty[]" id="entrysalesqty" class="form-control cursormove13" placeholder="Quantity**" required autocomplete="off"></th>
                  <th><button type="button" name="addrow" class="btn btn-success addrow cursormove13" id="addrow"><i class="fa fa-plus"></i></button></th>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="form-group">
            <input class="form-control getrate" name="getrate" id="getrate" type="text" value="0.50" />
            <input class="form-control ratexqty" name="ratexqty" id="ratexqty" type="text">
          </div>
          <div class="form-group" id="showRate">
            <div class="input-group">
              <div class="input-group-prepend">
                <span class="input-group-text">Total Amount to pay in MYR</span>
              </div>
              <input class="form-control" name="totalamount" id="totalamount" type="text" value="" readonly>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
          <input type="submit" name="entrysalesinsert" id="entrysalesinsert" value="Save" class="btn btn-danger cursormove13">
        </div>
      </form>
    </div>
  </div>
</div>
<!-- /.Add sales Modal -->

​

使用parseInt()和parseFloat()将帮助您将字符串值转换为整数和浮点数，这样您就可以执行基本数学运算。.toFixed()有助于让它看起来像是货币。