动态表单添加/删除字段

Question

我尝试创建一个可以动态添加/删除输入的表单。 我可以通过单击一个按钮来创建一个新行，但是当我将一个值传递给另一个页面时，我的输入似乎没有被收集。

这是代码

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(e){
            //var               
            var x = 1;

            //add
            $("#add").click(function(e){
                x++;
                var mark = '<tr><td width="200" height="30" align="center">'+x+'</td><td width="200" height="30" align="center"><input type="text" name="item_name[]" /></td><td width="200" height="30" align="center"><input type="text" name="item_fact[]" /></td><td width="200" height="30" align="center"><input type="text" name="item_desc[]" /></td><td width="200" height="30" align="center"><input type="text" name="item_amount[]"/></td><td width="200" height="30" align="center"><input type="text" name="item_price[]" /></td><td width="200" height="30" align="center"><a herf="#" id="remove" class="button">X</a></td></tr>';
                $("#dynamic_field").append(mark);
            });
            //remove
            $("#dynamic_field").on('click','#remove', function(e){
                $(this).closest('tr').remove();
                x--;
            });
        });
    </script>

这是html代码

<tr id="container">
    <td width="200" height="30" align="center">1</td>
    <td width="200" height="30" align="center"><input type="text" name="item_name[]"/></td>
    <td width="200" height="30" align="center"><input type="text" name="item_fact[]"/></td>
    <td width="200" height="30" align="center"><input type="text" name="item_desc[]"/></td>
    <td width="200" height="30" align="center"><input type="text" name="item_amount[]"/></td>
    <td width="200" height="30" align="center"><input type="text" name="item_price[]"/></td>
    <td width="200" height="30" align="center"><a herf="#" id="add" class="button">Add more</a></td>
</tr>

当print_r 的值它传递输入只是html 输入。

item_name => Array ( [0] =>test 1)

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
        $(document).ready(function(e){

            var x = 1; //for row count

            //add more button click 
            $("#add").click(function(e){
                 x++;   

//添加更多点击的行html
var 标记 = ''+x+'X';

             $("#mt tr:last").after(mark); //add the row after the last existing tr 

            });
            //code for X click
            $("#mt").on('click','#remove', function(e){
               //remove the current row
                $(this).closest('tr').remove();
                x--;
            });




        });
    </script>


 <table id="mt">
 <tr id="container">

                <td width="200" height="30" align="center">1</td>
                <td width="200" height="30" align="center"><input type="text" name="item_name[]"/></td>
                <td width="200" height="30" align="center"><input type="text" name="item_fact[]"/></td>
                <td width="200" height="30" align="center"><input type="text" name="item_desc[]"/></td>
                <td width="200" height="30" align="center"><input type="text" name="item_amount[]"/></td>
                <td width="200" height="30" align="center"><input type="text" name="item_price[]"/></td>
                <td width="200" height="30" align="center"><a href="javascript:void(0)" id="add" class="button">Add more</a></td>

    </tr>

</table>