时间戳

首页 > 解决方案 > 如何计算keyup的最终金额

javascript - 如何计算keyup的最终金额

问题描述

我正在使用 Codeignator，我正在计算最终金额。如果任何用户输入将计算它并显示在最终金额字段中的总金额。

我也在动态添加输入字段。我尝试了一些代码，但它不起作用。

我需要使用 AJAX 进行计算。

我想要实现的是，这是我的第一页。 在此处输入图像描述

现在，如果任何用户输入这样的总金额，那么它将显示在最终金额字段中。 在此处输入图像描述

如果用户想添加更多字段，应该点击添加按钮并添加价格，它将计算并显示在字段框中，我在 50 中添加。 在此处输入图像描述

与此相同。

在此处输入图像描述

你会帮我解决这个问题吗？

$(document).ready(function() {
  var max_fields = 20; //maximum input boxes allowed
  var wrapper = $(".row_set"); //Fields wrapper
  var add_button = $(".add_row_click"); //Add button ID
  var baseUrl = "http://localhost/test/";

  var x = 1; //initlal text box count
  $(add_button).click(function(e) { //on add input button click
    e.preventDefault();
    if (x < max_fields) { //max input box allowed
      x++; //text box increment

      $(wrapper).append('<div class="row_set custom_fields"><input type="text" name="single_price[]" id="single_p_price' + x + '" placeholder="single price"> <input type="text" name="total_p_price[]" id="total_p_price' + x + '" placeholder="total amount"><div class="btn_row remove_field"> <span> - </span> Remove  </div></div>');
    }
  });
  $(wrapper).on("click", ".remove_field", function(e) { //user click on remove text
    e.preventDefault();
    //$(this).parent('custom_fields').remove();
    $(this).closest('.custom_fields').remove();
    x--;
  })
  /*comment start here $(".medication_info").on('keyup', 'input[id^=total_p_price]', function() {
    var that = $(this); // CHANGE HERE
    var total_p_price = that.val();
    $.ajax({
      type: "POST",
      url: baseUrl + "/Access_control/calculate_amt",
      data: {
        total_p_price: total_p_price
      },
      cache: false,
      success: function(html) {
        console.log(html);
        var single_price = $('#final_amt').val(html);
      }
    });
  });comment end here*/
  $('.medication_info').on('keyup', 'input[id^=total_p_price]', function() {
    var totalSum = 0;
    $('input[id^=total_p_price]').each(function() {
      var inputVal = $(this).val();
      if ($.isNumeric(inputVal)) {
        totalSum += parseFloat(inputVal);
      }
    });
    $('#final_amt').val(totalSum);
  });
});
<form>
  <div class="medication_info">
    <div class="row_set">
      <input type="text" name="single_price[]" id="single_p_price" placeholder="single price">
      <input type="text" name="total_p_price[]" id="total_p_price" placeholder="total amount">
    </div>
    <div class="btn_row add_row_click"> <span> +  </span> Add </div>
    <input type="text" name="final_amt" id="final_amt" placeholder="Final total">
  </div>
  <input type="submit" name="send" value="submit">
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

控制器

public function calculate_amt()
  {
   $total_p_price=$this->input->post('total_p_price');
     foreach ($total_p_price as $key => $value) {
      $final_amt +=$value;
     }
     echo $final_amt;
  }

标签： javascriptjqueryhtmlcodeigniter-3

解决方案

对于这个操作来说，jQuery 和使用 AJAX 来涉及服务器似乎都过大了。

//Find elements in HTML
var singleProductPriceInput = document.getElementById("single_p_price");
var totalProductAmountInput = document.getElementById("total_p_price");
var finalTotalInput = document.getElementById("final_amt");
var button = document.getElementById("submitter");
//Update function
function updatePrice() {
    var singleProductPrice = parseFloat(singleProductPriceInput.value);
    var totalProductAmount = parseFloat(totalProductAmountInput.value);
    var result = (singleProductPrice * totalProductAmount);
    if (!isNaN(result)) {
        finalTotalInput.value = result.toFixed(2);
    }
}
//Submit function
function submit() {
    alert("Do your server stuff\nAJAX here");
}
//Bind event listeners
singleProductPriceInput.addEventListener("change", updatePrice);
singleProductPriceInput.addEventListener("keyup", updatePrice);
singleProductPriceInput.addEventListener("mouseup", updatePrice);
totalProductAmountInput.addEventListener("change", updatePrice);
totalProductAmountInput.addEventListener("keyup", updatePrice);
totalProductAmountInput.addEventListener("mouseup", updatePrice);
button.addEventListener("click", submit);
<form>
  <div class="medication_info">
    <div class="row_set">
      <input type="number" name="single_price[]" id="single_p_price" placeholder="single price">
      <input type="number" name="total_p_price[]" id="total_p_price" placeholder="total amount">
    </div>
    <div class="btn_row add_row_click"> <span> +  </span> Add </div>
    <input type="text" name="final_amt" id="final_amt" placeholder="Final total" readonly>
  </div>
  <input id="submitter" type="button" name="send" value="submit">
</form>

推荐阅读