我正在向库存软件添加一些简单的项目，这些项目获取数据并使用动态输入添加到数据库。
<div class="col-lg-6">
<form action="invoice_check.php" method="POST">
<div class="row">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-medicines">
<thead>
<tr>
<th>Name</th>
<th>MFR</th>
<th>Quantity</th>
<th>Batch</th>
<th>Expiry</th>
<th>MRP</th>
<th>DSC</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:20%;"><div class="form-group"><input id="1" class="form-
control" placeholder="Name" type="text" name="mname[]"></input></div></td>
<td><div class="form-group"><input class="form-control"
placeholder="Manufacturer" name="mfg[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control"
placeholder="Qty" name="qty[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control"
placeholder="Batch" name="batch[]"></div></td>
<td><div class="form-group"><input class="form-control" placeholder="MM/YY"
id="cc" name="exp[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control"
placeholder="MRP" name="mrp[]"></div></td>
<td style="width:10%;"><div class="form-group"><input class="form-control"
placeholder="DSC" name="dsc[]"></div></td>
<td>
-
</td>
</tr>
</tbody>
</table>
</div>
</div>
<input type="submit" class="btn btn-primary btn-lg btn-block">
</form>
我有以下jquery用于添加一个新的包含新输入集的。 问题是虽然添加了行，但在提交时，数组不包含附加输入项的数据。
例如，我添加了多少输入，即使我已将数组用于输入，也不会记录数据。
我知道数组的脚本不是问题，因为我尝试使用相同的代码而不添加jquery并且数组已经记录了数据。
<script>
$(document).ready(function() {
var wrapper = $(".table-medicines"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x=1;
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
x++;
$(wrapper).append('<tr> <td><div class="form-group"><input class="form-control" id="'+x+'" placeholder="Name" type="text" name="mname[]"/></div></td> <td><div class="form-group"><input class="form-control" placeholder="Manufacturer" name="mfg[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Qty" name="qty[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Batch" name="batch[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Expiry" name="exp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="MRP" name="mrp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="DSC" name="dsc[]"></div></td> <td> <a href="#" class="remove_field"> <button type="button" class="add_field_button btn btn-danger btn-circle"><i class="fa fa-times "></i></button></a> </td> </tr>'); //add input box
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).closest('tr').remove(); x--;
})
});
提前致谢。
答案 0 :(得分：0)
首先，当DOM加载时，您将无法获得“添加新”按钮，因为它在其自我点击事件中生成。所以你必须在加载时初始化它。其余的事情是正确的，除了一些微小的变化。
$(document).ready(function() {
var wrapper = $(".table-medicines"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x=1;
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
x++;
$(wrapper).append('<tr> <td><div class="form-group"><input class="form-control" id="'+x+'" placeholder="Name" type="text" name="mname[]"/></div></td> <td><div class="form-group"><input class="form-control" placeholder="Manufacturer" name="mfg[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Qty" name="qty[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Batch" name="batch[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="Expiry" name="exp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="MRP" name="mrp[]"></div></td> <td><div class="form-group"><input class="form-control" placeholder="DSC" name="dsc[]"></div></td> <td> <button type="button" class="remove_field btn btn-danger btn-circle"><i class="fa fa-times "></i>Remove</button></td> </tr>'); //add input box
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).closest('tr').remove(); x--;
})
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="col-lg-6">
<form action="invoice_check.php" method="POST">
<div class="row">
<div class="table-responsive">
<table class="table table-striped table-bordered table-hover table-medicines">
<thead>
<tr>
<th>Name</th>
<th>MFR</th>
<th>Quantity</th>
<th>Batch</th>
<th>Expiry</th>
<th>MRP</th>
<th>DSC</th>
<th> </th>
</tr>
</thead>
<tbody>
<tr>
<td style="width:20%;">
<div class="form-group"><input id="1" class="form-
control" placeholder="Name" type="text" name="mname[]"></input></div>
</td>
<td>
<div class="form-group"><input class="form-control"
placeholder="Manufacturer" name="mfg[]"></div>
</td>
<td style="width:10%;">
<div class="form-group"><input class="form-control"
placeholder="Qty" name="qty[]"></div>
</td>
<td style="width:10%;">
<div class="form-group"><input class="form-control"
placeholder="Batch" name="batch[]"></div>
</td>
<td>
<div class="form-group"><input class="form-control" placeholder="MM/YY"
id="cc" name="exp[]"></div>
</td>
<td style="width:10%;">
<div class="form-group"><input class="form-control"
placeholder="MRP" name="mrp[]"></div>
</td>
<td style="width:10%;">
<div class="form-group"><input class="form-control"
placeholder="DSC" name="dsc[]"></div>
</td>
<td><button type="button" class="add_field_button btn btn-danger btn-circle"><i class="fa fa-times "></i>Add</button> </td>
</tr>
</tbody>
</table>
</div>
</div>
<input type="submit" class="btn btn-primary btn-lg btn-block">
</form>