javascript – 动态输入字段值不计算具有正确值的值

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

现在我正在做的是,用户将输入药物的名称,没有药丸和金额,以便根据金额计算价格并显示它.公式为$single_price = $total_amount / $qty_number;

上面的图像我添加了药物名称=“SIPLA”,药丸没有= 3,数量= 30.它将计算它并显示单个价格= 10.00

现在一切都很完美.

我们来谈谈“添加”按钮.如果任何用户想要多于一种药物,那么他/她应该点击“添加”按钮,它将显示与上面相同的字段.

我做了同样的过程,我添加了药物名称=“ZOCON 400”,没有药丸= 4和数量= 60.它计算并显示单个价格= 20.00这是错误的,它应该显示单个价格= 15.00.

1)为什么我得到单一价格= 20.00,因为它说的是第一种药物中添加的药丸= 3.所以它正在谈论第一个数量.它应该说没有药丸= 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;}

}

解决方法:

您似乎还有删除/添加操作的错误.
如果您有添加4项的情况,那么

> 1(初始)
> 2,3,4(动态生成)

然后决定删除2.
你将x减1,女巫给你x = 3和行1,3,4.如果现在,你添加一个新项目,你得到x 1,所以收集1,3,4,4.

为了避免这种模式,使用当前时间(在添加执行时)生成行的标识符可能是个好主意.

由于您正在处理“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以便轻松找到我的更改)
使用this和jquery,您可以立即找到所需的所有数据并进行更新
$(‘.single_price data [time =“1540021654”]’).val()将只给你这个结果.

另一个错误是,你正在生成id为静态的按钮,例如< span class =“value-button”id =“increase”onclick =“increaseValue('x')”value =“Increase Value”>
这是一个错误,因为id应该是唯一的.

标签：codeigniter-3,javascript,php,jquery
来源： https://codeday.me/bug/20191003/1846452.html