javascript – 动态输入字段值不计算具有正确值的值
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了javascript – 动态输入字段值不计算具有正确值的值，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6108字，纯文字阅读大概需要9分钟。
内容图文
我正在使用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应该是唯一的.
内容总结
以上是互联网集市为您收集整理的javascript – 动态输入字段值不计算具有正确值的值全部内容，希望文章能够帮你解决javascript – 动态输入字段值不计算具有正确值的值所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。