Question

我正在使用Codeignator。我的HTML输出对我来说是正确的。

现在我正在做的是，用户将输入药物的名称，不输入药丸和数量，以便用户根据数量计算价格并显示价格。公式为$single_price=$total_amount/$qty_number;

在图像上方，我添加了medication name="SIPLA", no of pills=3和amount=30。它将计算并显示single price=10.00

一切正常，直到现在。

让我们谈谈“添加”按钮。如果任何用户想要一种以上的药物，那么他/她应该单击“添加”按钮，它将显示与上面相同的字段。

我执行了相同的过程，我添加了medication name="ZOCON 400", no of pills=4和amount=60。它计算并显示single price=20.00，这是错误的，应该显示single price=15.00。

1）为什么我得到的单价是20.00，因为它说的是第一种药物中未加的药= 3。所以说的是第一个数量。应该说不出pill = 4

2）单个价格的计算也显示在两个字段中。第一个和第二个。我只需要第二个。

3）如何在数据库中提交此数据？

希望您理解我的问题。

代码查看

<div class="add_row">
    <input type="text" name="medication_name[]" id="medication_name" class="form_control text_cap" placeholder="medication_name">

    <span class="value_button" id="decrease" onclick="decreaseValue(1)" value="Decrease Value">-</span>
    <input type="number" id="number1" class="qty_number form_control"  name="qty_number[]" value="0" class="form_control"/>
    <span class="value_button" id="increase" onclick="increaseValue(1)" value="Increase Value">+</span>

    <input type="text" class="form_control" name="single_price[]"  id="single_price"  placeholder="single price" />

    <input type="text" class="form_control" name="total_p_price[]" id="total_p_price" placeholder="total price" />

    <div class="btn_row add_row_click"> <span> +  </span> Add </div>

  </div>

Ajax和Js

function increaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value++;
  document.getElementById('number' + n).value = value;
}

function decreaseValue(n) {
  var value = parseInt(document.getElementById('number' + n).value, 10);
  value = isNaN(value) ? 0 : value;
  value < 1 ? value = 1 : '';
  value--;
  document.getElementById('number' + n).value = value;
}

  $(document).ready(function() {
    var max_fields      = 20; //maximum input boxes allowed
    var wrapper         = $(".add_row"); //Fields wrapper
    var add_button      = $(".add_row_click"); //Add button ID

    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="custom_fields"><input type="text" name="medication_name[]" id="medication_name'+ x +'" class="form_control text_cap" placeholder="medication_name"><span class="value-button" id="decrease" onclick="decreaseValue('+ x +')" value="Decrease Value">-</span><input type="number" id="number'+ x +'" value="0" name="qty_member[]" /><span class="value-button" id="increase" onclick="increaseValue('+ x +')" value="Increase Value">+</span><br /><input type="text" class="form_control" name="single_price[]"  id="single_price'+ x +'"  placeholder="single price" />    <input type="text" class="form_control" name="total_p_price[]" id="total_p_price'+ x +'" placeholder="total price" /> <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--;
    })
$("body").on('keyup', 'input[id^=total_p_price]', function() {
  //$('input[id^=single_price]').prop('disabled', true);
    var  total_p_price= $(this).val();
    var qty_number = $('input[id^=number]').val();
    $.ajax({
        type  : "POST",
        url: baseUrl + "/Customer_control/calculate_total_p_price",
        data: {total_p_price: total_p_price,qty_number:qty_number},
        cache : false,
        success: function(html) {
          //alert(html);
          $('input[id^=single_price]').val(html); 
        }
      });
});

});

控制器

public function calculate_total_p_price(){
  $total_p_price=$this->input->post('total_p_price');
  $qty_number=$this->input->post('qty_number');

  $single_price=$this->Customer_model->calculate_total_p_price($total_p_price,$qty_number);

  echo $single_price;
}

模型

public function calculate_total_p_price($total_p_price,$qty_number){

 // print_r($total_p_price);
if(empty($qty_number) || ($qty_number == 0)){
return 0;
}
elseif(empty($total_p_price) || ($total_p_price == 0)){
return 0;
}
elseif(!empty($total_p_price) && (!empty($qty_number) || ($qty_number>0))){
  $single_price=$total_p_price/$qty_number;
return number_format((float)$single_price, 2, '.', '');
}
else{return 0;}

}

Answer 1

$("body").on('keyup', 'input[id^=total_p_price]', function() {
  //$('input[id^=single_price]').prop('disabled', true);
    var that = $(this); // CHANGE HERE
    var  total_p_price= that.val();
    var qty_number = that.siblings().find("input[id^=number]").val();
    console.log(qty_number);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="add_row">
    <input type="text" name="medication_name[]" id="medication_name" class="form_control text_cap" placeholder="medication_name">

    <span class="value_button" id="decrease" onclick="decreaseValue(1)" value="Decrease Value">-</span>
    <input type="number" id="number1" class="qty_number form_control"  name="qty_number[]" value="0" class="form_control"/>
    <span class="value_button" id="increase" onclick="increaseValue(1)" value="Increase Value">+</span>

    <input type="text" class="form_control" name="single_price[]"  id="single_price"  placeholder="single price" />

    <input type="text" class="form_control" name="total_p_price[]" id="total_p_price" placeholder="total price" />

    <div class="btn_row add_row_click"> <span> +  </span> Add </div>

  </div><div class="add_row">
    <input type="text" name="medication_name[]" id="medication_name" class="form_control text_cap" placeholder="medication_name">

    <span class="value_button" id="decrease" onclick="decreaseValue(1)" value="Decrease Value">-</span>
    <input type="number" id="number1" class="qty_number form_control"  name="qty_number[]" value="0" class="form_control"/>
    <span class="value_button" id="increase" onclick="increaseValue(1)" value="Increase Value">+</span>

    <input type="text" class="form_control" name="single_price[]"  id="single_price"  placeholder="single price" />

    <input type="text" class="form_control" name="total_p_price[]" id="total_p_price" placeholder="total price" />

    <div class="btn_row add_row_click"> <span> +  </span> Add </div>

  </div>

我可以回答前两个问题，对于第三个问题，没有太多信息可以继续。对于3，您有任何错误吗？前两个问题有相似的问题

问题在于以下语法$('input[id^=single_price]').val(html);

它的作用是选择与条件匹配的dom中的所有输入。在您的情况下，您有两个符合条件的输入，因此都将更新。您只需要选择同一行中的一个即可。您可以使用Jquery提供的同级函数来实现。通过以下方式更改功能

$("body").on('keyup', 'input[id^=total_p_price]', function() {
  //$('input[id^=single_price]').prop('disabled', true);
    var that = $(this); // CHANGE HERE
    var  total_p_price= that.val();
    var qty_number = that.siblings('input[id^=number]').val(); // selects only the one closest to it
    $.ajax({
        type  : "POST",
        url: baseUrl + "/Customer_control/calculate_total_p_price",
        data: {total_p_price: total_p_price,qty_number:qty_number},
        cache : false,
        success: function(html) {
          //alert(html);
          that.siblings('input[id^=single_price]').val(html); 
        }
      });
});

Answer 2

似乎您在删除/添加操作上有一个错误。如果您要添加4个项目，那么

1（初始）
2,3,4（动态生成）

，然后决定删除2。您将x减1，女巫给您x=3和行1,3,4。如果现在，您添加一个新项目，则得到x+1，因此得到集合1,3,4,4。

为避免这种模式，最好使用当前时间（在add执行时间）为您的行生成一个标识符。

由于您正在处理“ add_row” div中包含的HTML，因此可以将其用作引用对象。您可以使用.parents（“。add_row”），然后选择.find（'。single_price'）或.find（'。total_p_price'），而不用使用增加/减少点击事件收到的“ n”值

另一种方法是使用“ data-”参数或类，该参数或类使您可以轻松识别工作所在的当前行。我可能会用这样的东西：

<div class="custom_fields" data-time="1540021654"> <!-- current time on the dynamically added row -->
  <input type="text" name="medication_name[]" data-time="1540021654" class="medication_name">
  <span class="value-button" data-time="1540021654" onclick="decreaseValue" value="Decrease Value">-</span>
  <input type="number" data-time="1540021654" class="qty_member" value="0" name="qty_member[]" />
  <span class="value-button" data-time="1540021654" class="increase_name" onclick="increaseValue">+</span>
  <br />
  <input type="text" class="form_control" data-time="1540021654" name="single_price[]" class="single_price"  />    
  <input type="text" class="form_control" data-time="1540021654" name="total_p_price[]" class="total_p_price" /> 
  <div class="btn_row remove_field"> 
  <span> - </span> Remove  </div>
</div>

（我简化了一些html以便于查找更改）使用此和jquery，您可以立即找到所需的所有数据并进行更新 $（'。single_price data [time =“ 1540021654”]'）。val（）会给您这个结果，而且只有它。

另一个错误是，您正在生成具有静态ID的按钮，例如<span class="value-button" id="increase" onclick="increaseValue('+ x +')" value="Increase Value"> 这是一个错误，因为id应该是唯一的。

动态输入字段值未使用正确的值进行计算

2 个答案: