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 mark =``+ 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>

动态表单添加/删除字段

1 个答案: