我有一个动态添加数据的表单。数据是关于产品名称，多少产品和价格有或没有税。
表单添加输入:
这是最初的形式:(在动态生成:
之后)<div class="row">
<input type="hidden" name="count" value="1" />
<div class="input_fields_wrap" class="float-left" dir="rtl" align="right" width="900px">
<button class="add_field_button">הוסף עוד שורה</button> </br>
<div align="center"> שם המוצר :<input type="text" id="item_name[]" name="item_name[]" />
כמות המוצר :<input type="number" id="how_much[]" name="how_much[]" style=" font-size: 12px; line-height: 1.2em; width: 95px;" />
עלות המוצר :<input type="number" id="item_price0]" name="item_price[]" onchange="update1(0);" style=" font-size: 12px; line-height: 1.2em; width: 95px;" />
עלות אחרי מע"מ :<input type="number" id="item_price_tax[]" name="item_price_tax[0]" onchange="update2(0);" style=" font-size: 12px; line-height: 1.2em; width: 95px;" />
סכום :<input type="number" id="item_price_total[]" name="item_price_total[]" onchange="update1(0);" style=" font-size: 12px; line-height: 1.2em; width: 125px;"/>
</div>
这是动态输出:
<SCRIPT>
$(document).ready(function() {
var max_fields = 99999; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 0; //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="product-item float-clear" style="clear:both;" align="center">שם המוצר :<input type="text" id="item_name['+x+']" name="item_name['+x+']" /> כמות המוצר :<input type="number" id="how_much['+x+']" name="how_much['+x+']" style=" font-size: 12px; line-height: 1.2em; width: 95px;" onchange="update1('+x+');" /> עלות המוצר :<input type="number" id="item_price['+x+']" style=" font-size: 12px; line-height: 1.2em; width: 95px;" name="item_price['+x+']" onchange="update1('+x+');" /> עלות אחרי מע"מ :<input type="number" id="item_price_tax['+x+']" style=" font-size: 12px; line-height: 1.2em; width: 95px;" name="item_price_tax['+x+']" onchange="update1('+x+');" />סכום :<input type="number" style=" font-size: 12px; line-height: 1.2em; width: 125px;" id="item_price_total['+x+']" name="item_price_total['+x+']" onchange="update1('+x+');" /><a href="#" class="remove_field">הסר</a></div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</SCRIPT>
现在我想让脚本填写在最后的输入框(我已经写了onchange="updat1();"，但该函数不工作，我不知道如何传递和如何正确返回这里是!:
function update1(x)
{
var how_much = "#how_much[]";
var item_price = "#item_price[]";
var item_price_tax = "#item_price_tax[]";
var item_price_tax3 = "item_price_tax[]";
var item_price_total = "#item_price_total[]";
var item_price_total3 = "item_price_total[]";
var how_much2 = document.getElementById("how_much[]").value;
var item_price2 = document.getElementById("item_price[]").value;
var item_price_tax2 = document.getElementById("item_price_tax[]").value;
var item_price_total2 = document.getElementById("item_price_total[]").value;
if((item_price_tax2==0)||(item_price_tax2=='')){
alert(2);
item_price_tax3.value = document.getElementById(item_price2).value * 1.17;
item_price_total3.value=document.getElementById(item_price2).value * 1.17 * how_much2;
item_price_tax[].value=document.getElementById(item_price2).value * 1.17 * how_much2;
item_price_total[].value=document.getElementById(item_price2).value * 1.17 * how_much2;
}
else{
item_price.value3 = document.getElementById(item_price).value * 83%;
item_price_total3.value=document.getElementById(item_price).value * 83% * how_much;
}
}
</SCRIPT>
需要帮助，非常感谢
这里有几件事需要修复。
首先，你的id不是唯一的
第二个，你正在使用长的javascript document.getElementById(xyz).value而不是较短的jQuery方式$(xyz).val()。
第三个，您在任何地方都使用x增量。增量器是个好主意……但是正如您将在下面的代码中看到的那样，我没有使用它。它的唯一用途是与max_fields进行比较。
第四个，你没有使用类来样式元素。一切都是内联的。这使得代码更难阅读和维护。
最后，我把你的超长append()行放在多行上…这使得代码更容易阅读。(我也翻译希伯来语!)但这是为了我的理解!)
我所做的所有这些更改都有助于理解你的长附加行。
所有这些影响可读性的东西可能就是你在计算中迷失的原因。
,
所以…这是我的建议。
您可以在中看到它的作用。
$(document).ready(function() {
var max_fields = 99999; //maximum input boxes allowed
var wrapper = $(".input_fields_wrap"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 0; //initlal text box count
//on add input button click
$(add_button).click(function(e){
e.preventDefault();
var iwrapper = $( "<div class='input_fields_wrap'></div>" ).appendTo( wrapper );
if(x < max_fields){ //max input box allowed
//add input box
$(iwrapper).append('<div class="product-item float-clear" style="clear:both;" align="center">');
// Product name (hebrew translation)
$(iwrapper).append('שם המוצר : <input type="text" class="item_name">');
// Amount of product (hebrew translation)
$(iwrapper).append(' כמות המוצר : <input type="number" class="priceInput how_much">');
// The cost of the product (hebrew translation)
$(iwrapper).append(' עלות המוצר : <input type="number" class="priceInput item_price">');
// The cost after VAT (hebrew translation)
$(iwrapper).append('עלות אחרי מע"מ : <input type="number" class="priceInput item_price_tax" disabled>');
// Amount (hebrew translation)
$(iwrapper).append('סכום : <input type="number" class="totalInput item_price_total" disabled>');
// Remove (hebrew translation)
$(iwrapper).append(' <a class="remove_field">הסר</a>');
$(wrapper).append('</div>');
x++;
}
});
//user click on remove text
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault();
$(this).parent('div').remove();
x--;
})
// Your "update1" function improved
$(".input_fields_wrap").on("change",".how_much, .item_price",function(){
var how_much = $(this).parent().children(".how_much").val();
var item_price = $(this).parent().children(".item_price").val();
if( how_much==0 || item_price==0 ){
// rests displayed values to zero, user has not finished inputting values.
$(this).siblings(".item_price_tax").val("");
$(this).siblings(".totalInput").val("");
}else{
// Calculations
item_price_VAT = item_price * 1.17;
total = how_much * item_price_VAT;
// Show calculated amounts
$(this).siblings(".item_price_tax").val(item_price_VAT);
$(this).siblings(".totalInput").val(total);
}
});
});
注: I disabled结果输入，因为用户不应该修改这些(在我看来)。这是我应用的CSS…
.priceInput{
font-size:12px;
line-height:1.2em;
width:95px;
}
.totalInput{
font-size:12px;
line-height:1.2em;
width:125px;
}
.remove_field{ // This one replaces a unuseful href="#"
text-decoration:underline;
color:dodgerblue;
cursor:pointer;
}
我想知道你为什么要用这么多[]…
然后想到你可能想要用数组来保存这些行。
// Prepare values into arrays...
var item_name_array=[];
var how_much_array=[];
var item_price_array=[];
var item_price_tax_array=[];
var item_price_total_array=[];
$(".item_name").each(function(i,val){
item_name_array[i] = $(this).val();
how_much_array[i] = $(this).sibling(".how_much").val();
item_price_array[i] = $(this).sibling(".item_price").val();
item_price_tax_array[i] = $(this).sibling(".item_price_tax").val();
item_price_total_array[i] = $(this).sibling(".item_price_total").val();
});
demo link
$(document).ready(function() {
var max_fields = 99999; //maximum input boxes allowed
var wrapper = $("#wraper"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 0; //initlal text box count
//on add input button click
$(add_button).click(function(e){
e.preventDefault();
var iWrapper = $( "<div class='input_fields_wrap'></div>" ).appendTo( wrapper );
if(x < max_fields){ //max input box allowed
//add input box
iWrapper.append('<div class="product-item float-clear" style="clear:both;" align="center">');
// Product name (hebrew translation)
iWrapper.append('שם המוצר : <input type="text" class="item_name">');
// Amount of product (hebrew translation)
iWrapper.append(' כמות המוצר : <input type="number" class="priceInput how_much">');
// The cost of the product (hebrew translation)
iWrapper.append(' עלות המוצר : <input type="number" class="priceInput item_price">');
// The cost after VAT (hebrew translation)
iWrapper.append('עלות אחרי מע"מ : <input type="number" class="priceInput item_price_tax" disabled>');
// Amount (hebrew translation)
iWrapper.append('סכום : <input type="number" class="totalInput item_price_total" disabled>');
// Remove (hebrew translation)
iWrapper.append(' <a class="remove_field">הסר</a>');
iWrapper.append('</div>');
}
});
//user click on remove text
$(wrapper).on("click",".remove_field", function(e){
e.preventDefault();
$(this).parent('div').remove();
})
// Your "update1" function improved
$(".input_fields_wrap").on("change",".how_much, .item_price",function(){
var how_much = $(this).parent().children(".how_much").val();
var item_price = $(this).parent().children(".item_price").val();
if( how_much==0 || item_price==0 ){
// rests displayed values to zero, user has not finished inputting values.
$(this).siblings(".item_price_tax").val("");
$(this).siblings(".totalInput").val("");
}else{
// Calculations
item_price_VAT = item_price * 1.17;
total = how_much * item_price_VAT;
// Show calculated amounts
$(this).siblings(".item_price_tax").val(item_price_VAT);
$(this).siblings(".totalInput").val(total);
}
});
});.priceInput{
font-size:12px;
line-height:1.2em;
width:95px;
}
.totalInput{
font-size:12px;
line-height:1.2em;
width:125px;
}
.remove_field{
text-decoration:underline;
color:dodgerblue;
cursor:pointer;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="add_field_button">Add a row</button><br>
<br>
<div id="wraper">
</div>