更改时，输入值将添加到上一个值

Question

我正在尝试创建一个JS / Jquery函数，用户可以在其中键入特定数量的产品。当用户在＆＃34;数量＆＃34;中输入数字时输入，该数字乘以产品价格并显示在＆＃34;小计＆＃34;输入

假设我有一些价格为$4的产品，我的问题是，当用户输入数量时，请说12，这会给出小计$48，但是将其更改为3，它会将3 * $4添加到$48，并在＆＃34;子总计＆＃34;中提供$60输入，而不是$12

我希望它摆脱48.00美元，只显示新的小计，即12.00美元。关于我可以在功能上改变什么以使这个功能成为可能的任何想法？

我的JavaScript代码：

function selectQuantity(qty) {

    var qtyValue = qty.value;
    var qtyId = qty.id;
    var arr = qtyId.split('_');
    var productId = 'product_' + arr[1] + '_' + arr[2];
    var productValue = $("#" + productId).val();

    var prodprice = document.getElementById("prodprice");
    var selectedValue = prodprice.options[prodprice.selectedIndex].value;

    if (selectedValue == "client") {
        $.ajax({ //create an ajax request to load_page.php
            type: "GET",
            url: "ajax_all.php?from=pos_product1&name=" + productValue,
            dataType: "html", //expect html to be returned
            success: function(response) {
                var price = response * qtyValue;
                var sub_total = $("#sub-total").val();
                $("#sub-total").val((+sub_total + +price).toFixed(2));
                gstmultiply($("#sub-total").val());
            }
        });
    } else {

        $.ajax({ //create an ajax request to load_page.php
            type: "GET",
            url: "ajax_all.php?from=pos_product&name=" + productValue,
            dataType: "html", //expect html to be returned
            success: function(response) {
                var price = response * qtyValue;
                var sub_total = $("#sub-total").val();
                $("#sub-total").val((+sub_total + +price).toFixed(2));
                gstmultiply($("#sub-total").val());
            }
        });

    }

}

以下是我表单的具体组成部分：

      <div class="additional_position">
        <div class="clearfix"></div>
        <div class="form-group clearfix">
            <div class="col-sm-1 col-sm-offset-4 type"  id="category_0">
             <select data-placeholder="Choose a Category..." onchange="selectCategory(this)"  id="category_dd_0" name="card_type[]" class="chosen-select-deselect1 form-control category" style="width:250px;">
                 <?php
                $query = mysqli_query($dbc,"SELECT DISTINCT category FROM inventory");
                echo '<option value="">Please Select</option>';
                while($row = mysqli_fetch_array($query)) {
                    ?><option id='<?php echo $row['category'];?>' value='<?php echo $row['category'];?>'><?php echo $row['category'];?></option><?php
                }
                ?>
            </select>
            </div>

            <div class="col-sm-3 eq" id="product_0" style="width:250px; position:relative; left:160px;">
                <select data-placeholder="Choose a Product..." name="product_name[]" id="product_dd_0"  class="chosen-select-deselect1 form-control product" width="380" style="width:250px; position:relative;">
                    <option value=""></option>

                </select>
            </div>
                <div class="col-sm-3 qt" id="qty_0" style="width:50px; position:relative; left:180px">
                    <input data-placeholder="Choose a Product..." name="quantity_number[]" id="qty_dd_0" width="50px" onchange="selectQuantity(this);" value="0" style=" width:50px;" type="text" class="form-control quantity" />
                </div>

        </div>

    </div>



    <div id="add_here_new_position"></div>

    <div class="col-sm-8 col-sm-offset-4 triple-gap-bottom">
        <button id="add_position_button" class="btn brand-btn mobile-block">Add</button>
    </div>



      <div class="form-group">
        <label for="site_name" class="col-sm-4 control-label">Sub-Total:</label>
        <div class="col-sm-8">
          <input name="sub-total" id="sub-total" value=0 type="text" class="form-control" />
        </div>
      </div>