Question

我正在使用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;
  }

Answer 1

这可能就是您想要的

$(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[]" class="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--;
  })
  $(".medication_info").on('keyup', 'input[id^=total_p_price]', function() {
    // Sum all the values in the total_p_price fields
    var that = $(this);
  

$.ajax({
  type: "POST",
  url: baseUrl + "/Access_control/calculate_amt",
  data: {
    total_p_price: $(".medication_info .total_p_price").serialize()
  },
  cache: false,
  success: function(html) {
    console.log(html);
    var single_price = $('#final_amt').val(html);
  }
});
 
  });
});

<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[]" class="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>

Answer 2

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

Answer 3

简单的Javascript KeyUp Event计算

$("input").keyup(function () {
    var pr = $(this).data("price");
    var name = $(this).data("name");
    var qut = $(this).val();
    var total = pr * qut;
    $("#"+name).text(total);
});
$("#placeorder").click(function () {
    var total = 0;
    $('.t').each(function () {
        total += Number($(this).text());
    });
    $('#total').text(total);
});

.t{
    border:0px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Bone Burger:</td>
        <td><input type="text" data-name="gold" data-price="28" size="1" /></td>
        <td> * 28r.s<td>
        <td>= <label id="gold" class="t" readonly ></label>r.s</td>
    </tr>
    <tr>
        <td>Smoke Burger:</td>
        <td><input type="text" data-name="sakti" data-price="29" size="1" /></td>
        <td> * 29r.s<td>
        <td>= <label id="sakti" class="t" readonly ></label>r.s</td>
    </tr>   
    <tr>
        <td>Voodoo Burger:</td>
        <td><input type="text" data-name="taja" data-price="30" size="1" /></td>
        <td> * 30r.s<td>
        <td>= <label id="taja" class="t" readonly ></label>r.s</td>
    </tr>  
    <tr>
        <td>Ayhuaska Sour:</td>
        <td><input type="text" data-name="gay" data-price="18" size="1" /></td>
        <td> * 18r.s<td>
        <td>= <label id="gay" class="t" readonly ></label>r.s</td>
    </tr>
    <tr>
        <td>Beyond the Pale:</td>
        <td><input type="text" data-name="chhash" data-price="10" size="1" /></td>
        <td> * 10r.s<td>
        <td>= <label id="chhash" class="t" readonly ></label>r.s</td>
    </tr>     
    <tr>
        <td>
            <button id="placeorder">Place order</button>
        </td>
    </tr>
    <tr>
        <td><p>Total:<span id="total"></span></p></td>
    </tr>
</table>

如何计算加价的最终金额

3 个答案: