将数据从动态表单获取到javascript中，并将其调用返回

我有一个动态添加数据的表单。。数据是关于产品名称、产品数量和价格（含税或不含税）

该表单添加输入：

这是最初的形式：（动态生成后：

<div class="row">
        <input type="hidden" name="count" value="1" />
<div class="input_fields_wrap" class="float-left" dir="rtl" align="right" width="900px">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
    <button class="add_field_button">הוסף עוד שורה</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</br>
    <div align="center"> שם המוצר&nbsp; :<input type="text" id="item_name[]" name="item_name[]" />
    &nbsp;כמות המוצר :<input type="number" id="how_much[]"   name="how_much[]" style=" font-size: 12px; line-height: 1.2em; width: 95px;"  />
    &nbsp;עלות המוצר&nbsp; :<input type="number" id="item_price0]" name="item_price[]" onchange="update1(0);" style=" font-size: 12px; line-height: 1.2em; width: 95px;" />
    עלות אחרי מע&quot;מ&nbsp; :<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;" />
    סכום&nbsp; :<input type="number"  id="item_price_total[]" name="item_price_total[]" onchange="update1(0);"  style=" font-size: 12px; line-height: 1.2em; width: 125px;"/>
&nbsp;&nbsp;   &nbsp;   &nbsp;
   </div>

הסףעדשורה

שם המוצר  :
כמות המוצר :
עלות המוצר  :
עלות אחרי מע"מ  :
סכום  :

以下是动态outo生成：

<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">שם המוצר&nbsp; :<input type="text" id="item_name['+x+']" name="item_name['+x+']" />&nbsp;כמות המוצר :<input type="number" id="how_much['+x+']" name="how_much['+x+']"  style=" font-size: 12px; line-height: 1.2em; width: 95px;"  onchange="update1('+x+');"  />&nbsp;עלות המוצר&nbsp; :<input type="number" id="item_price['+x+']"  style=" font-size: 12px; line-height: 1.2em; width: 95px;" name="item_price['+x+']" onchange="update1('+x+');"  /> עלות אחרי מע&quot;מ&nbsp; :<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+');" />סכום&nbsp; :<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>

$（文档）.ready（函数（）{
var max_fields=99999；//允许的最大输入框数
var wrapper=$（“.input_fields_wrapp”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=0；//初始文本框计数
$（添加按钮）。单击（函数（e）{//在添加输入按钮上单击
e、 预防默认值（）；
如果（x

现在，我想创建一个脚本来填充最后的输入框（我已经编写了onchange=“update1（）；”，但是函数不起作用，我不知道如何传递和hw来正确返回它

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>

函数更新1（x）
{
var how_-money=“#how_-money[]”；
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_much2[]）.value；
var item_price 2=document.getElementById（“item_price[]）。值；
var item_price_tax2=document.getElementById（“item_price_tax[]）。值；
var item_price_total2=document.getElementById（“item_price_total[]）值；
如果（（项目价格税2==0）项目价格税2==0）{
警报（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_price 2）.value*1.17*how_much2；
}
否则{
item_price.value3=document.getElementById（item_price）.value*83%；
item_price_total3.value=document.getElementById（item_price）.value*83%*多少；
}
}

---

需要帮助，非常感谢这里有几件事需要解决

首先，您的

id

不是唯一的

第二个，您使用的是长javascript

document.getElementById（xyz）.value

而不是较短的jQuery方式

$（xyz）.val（）

第三个，您到处都在使用

x

递增器。递增器是个好主意……但正如我在下面建议的代码中所看到的，我没有使用它。它的唯一用途是与

max\u字段

进行比较

第四个，您没有使用classe来设置元素的样式。所有内容都是内联的。这使得代码更难阅读和维护

上一次，我将超长的

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('שם המוצר&nbsp; :                <input type="text" class="item_name">');

            // Amount of product (hebrew translation)
            $(iwrapper).append('&nbsp;כמות המוצר :          <input type="number" class="priceInput how_much">');

            // The cost of the product (hebrew translation)
            $(iwrapper).append('&nbsp;עלות המוצר&nbsp; :        <input type="number" class="priceInput item_price">');

            // The cost after VAT (hebrew translation)
            $(iwrapper).append('עלות אחרי מע&quot;מ&nbsp; : <input type="number" class="priceInput item_price_tax" disabled>');

            // Amount (hebrew translation)
            $(iwrapper).append('סכום&nbsp; :                    <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);
        }
    });
});

奖金
我想知道你为什么在哪里使用这么多

[]

…
并且想出了一个想法，你可以用数组来保存这些行

下面是如何在submit函数中创建数组：

// 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();
});

$（文档）.ready（函数（）{
var max_fields=99999；//允许的最大输入框数
var wrapper=$（“#wrapper”）；//字段包装器
var add_button=$（“.add_字段_button”）；//添加按钮ID
var x=0；//初始文本框计数
//在“添加输入”按钮上单击
$（添加按钮）。单击（功能（e）{
e、 预防默认值（）；
var iWrapper=$（“”）。appendTo（包装器）；
如果（x// 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();
});