动态输入字段值不使用正确的值计算 [英] Dynamic input field values are not calculating the with the right value
本文介绍了动态输入字段值不使用正确的值计算的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用Codeignator。我的HTML输出对我来说是正确的。
现在我正在做的是，用户将输入药物的名称，没有药丸和金额，以便根据金额计算价格并显示它。公式为 $ single_price = $ total_amount / $ qty_number;
代码
查看
< div class =add_row> ;
< input type =textname =medication_name []id =medication_nameclass =form_control text_capplaceholder =medication_name>
< span class =value_buttonid =减少onclick =decreaseValue（1）value =减少价值> - < / span>
< input type =numberid =number1class =qty_number form_controlname =qty_number []value =0class =form_control/>
< span class =value_buttonid =increaseonclick =increaseValue（1）value =增加值> +< / span>
< input type =textclass =form_controlname =single_price []id =single_priceplaceholder =single price/>
< input type =textclass =form_controlname =total_p_price []id =total_p_priceplaceholder =total price/>
< div class =btn_row add_row_click> <跨度> +< / span>添加< / div>
< / div>
Ajax和Js
function increaseValue（n）{
var value = parseInt（document.getElementById（'number'+ n）.value，10）;
value = isNaN（value）？ 0：价值;
value ++;
document.getElementById（'number'+ n）.value = value;
}
函数decreaseValue（n）{
var value = parseInt（document.getElementById（'number'+ n）.value，10）;
value = isNaN（value）？ 0：价值;
值< 1？ value = 1：'';
value--;
document.getElementById（'number'+ n）.value = value;
}
$（文件）.ready（function（）{
var max_fields = 20; //最大输入框允许
var wrapper = $（。 add_row）; //字段包装器
var add_button = $（。add_row_click）; //添加按钮ID
var x = 1; // initlal文本框计数
$（add_button）.click（function（e）{// on add input button click
e.preventDefault（）;
if（x< max_fields）{// max input box允许
x ++; //文本框增量
$（包装）.append（'< div class =custom_fields>< input type =textname =medication_name [] id =medication_name'+ x +'class =form_control text_capplaceholder =medication_name>< span class =value-buttonid =decreaseonclick =decreaseValue（'+ x +'） value =Decrease Value> - < / span>< input type =numberid =number'+ x +'value =0name =qty_member []/>< span class =value-buttonid =increaseonclick =increaseValue（' + x +'）value =增加值> +< / span>< br />< input type =textclass =form_controlname =single_price []id =single_price '+ x +'占位符=单一价格/> < input type =textclass =form_controlname =total_p_price []id =total_p_price'+ x +'placeholder =total price/> < div class =btn_row remove_field> <跨度> - < / span>删除< / div>< / div>'）;
}
}）;
$（包装）.on（click，。remove_field，function（e）{//用户点击删除文本
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（{
类型：POST，
url：baseUrl +/ Customer_control / calculate_total_p_price，
数据：{total_p_price：total_p_price ，qty_number：qty_number}，
cache：false，
success：function（html）{
// alert（html）;
$（'input [id ^ = single_price] '）.val（html）;
}
}）;
}）;
}）;
控制器
公共函数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;
}
型号
公共函数calculate_total_p_price（$ total_p_price，$ qty_number）{
// print_r（$ total_p_price）;
if（空（$ qty_number）||（$ qty_number == 0））{
返回0;
}
elseif（空（$ total_p_price）||（$ total_p_price == 0））{
返回0;
}
elseif（！empty（$ total_p_price）&&（！empty（$ qty_number）||（$ qty_number> 0）））{
$ single_price = $ total_p_price / $ qty_number;
返回number_format（（float）$ single_price，2，'。'，''）;
}
else {return 0;}
}
解决方案
$（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 =textname =medication_name []id =medication_nameclass =form_control text_capplaceholder =medication_name> < span class =value_buttonid =减少onclick =decreaseValue（1）value =减少价值> - < / span> < input type =numberid =number1class =qty_number form_controlname =qty_number []value =0class =form_control/> < span class =value_buttonid =increaseonclick =increaseValue（1）value =增加值> +< / span> < input type =textclass =form_controlname =single_price []id =single_priceplaceholder =single price/> < input type =textclass =form_controlname =total_p_price []id =total_p_priceplaceholder =total price/> < div class =btn_row add_row_click> <跨度> +< / span>添加< / div> < / div>< div class =add_row> < input type =textname =medication_name []id =medication_nameclass =form_control text_capplaceholder =medication_name> < span class =value_buttonid =减少onclick =decreaseValue（1）value =减少价值> - < / span> < input type =numberid =number1class =qty_number form_controlname =qty_number []value =0class =form_control/> < span class =value_buttonid =increaseonclick =increaseValue（1）value =增加值> +< / span> < input type =textclass =form_controlname =single_price []id =single_priceplaceholder =single price/> < input type =textclass =form_controlname =total_p_price []id =total_p_priceplaceholder =total price/> < div class =btn_row add_row_click> <跨度> +< / span>添加< / 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）; //更改此处
var total_p_price = that.val（）;
var qty_number = that.siblings（'input [id ^ = number]'）。val（）; //仅选择最接近它的那个
$ .ajax（{
类型：POST，
url：baseUrl +/ Customer_control / calculate_total_p_price，
数据：{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）;
}
}）;
}）;
I am using Codeignator. My HTML output which is correct for me.
Now What I am doing is, the user will enter the name of the medication, no of pills and amount so that based on the amount it will calculate the price and display it. Formula is $single_price=$total_amount/$qty_number;
Above image I added medication name="SIPLA", no of pills=3 and amount=30. It will calculate it and display the single price=10.00
Everything is working perfectly til now.
Let's talk about the "ADD" button. If any user wants more then one medication then he/she should click on "ADD" button and it will display the same field as above.
I did the same process, I added a medication name="ZOCON 400", no of pills=4 and amount=60. It calculating and displaying the single price=20.00 which is wrong it should be displayed single price=15.00.
1) Why I am getting single price=20.00 because it's talking no of pills=3 which is added in the first medication. So it's talking the first one quantity. It should talk no of pill=4
2) The calculation of the single price is also displaying in both fields. first one as well as second one. I need only in the second one.
3) How to submit this data in the database?
Hope you understand my issue.
Code View
<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 and 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);
}
});
});
});
Controller
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;
}
Model
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;}
}
解决方案
$("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>
I can answer first two, for the third question, there is not much info to go on. For 3, are you getting any error? First two questions have similar issue
The issue is in the following syntax $('input[id^=single_price]').val(html);
What that does is it selects all the inputs in the dom that match the criteria. In your case you have two inputs that match the criteria and hence both are updated. You need to choose only the one that are in the same row. You can do that using the siblings function that Jquery provides. Change your function in the following way
$("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);
}
});
});
这篇关于动态输入字段值不使用正确的值计算的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
