如何在表单提交后使用JQuery从附加到HTML表的字段中获取$_POST数组中的值
How to get the values in $_POST array from the fields which are appended to the HTML table using JQuery after form submission?
我有一个HTML表单。这个表单包含HTML表。实际的HTML表非常大。为了供您参考，我在下面展示了一个表格的HTML代码，其中tablw只包含两条记录：
<form action="rebates.php" role="form" method="post">
<div style="margin-left: 12px" class="col-xs-4">
<div class="form-group">
<label for="company_name" class="col-lg-4">Manufacturer </label>
<div class="col-lg-7">
<select id="company_name" name="company_name" class="form-control">
<option value="" selected='selected'>Select Manufacturer</option>
<option value="33" >Eywa Solutions</option>
<option value="37" >Amazon</option>
<option value="40" >Test</option>
<option value="42" >RK</option>
<option value="46" >Santa Margherita</option>
</select>
</div>
</div>
</div>
<div style="margin-left: -61px" class="col-xs-4">
<div class="form-group">
<label for="product_id" class="col-lg-3">Product </label>
<div class="col-lg-7">
<select id="product_id" name="product_id" class="form-control">
<option value="" selected='selected'>Select Product</option>
<option value="5" >Chesse</option>
<option value="8" >Laptop an</option>
<option value="9" >Prosecco</option>
</select>
</div>
</div>
</div>
</div>
<br/>
<div class="col-lg-2"></div>
<div class="col-md-8">
<div style="overflow:auto" class="well">
<button style="float:right; margin-bottom: 20px" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
<br/>
<div class="table-responsive">
<table id="blacklistgrid" class="table table-bordered table-hover table-striped">
<thead>
<tr id="Row1">
<th style="vertical-align:middle" >Pack Of</th>
<th style="vertical-align:middle">Quantity</th>
<th style="vertical-align:middle">Volume</th>
<th style="vertical-align:middle">Unit</th>
<th style="vertical-align:middle">Rebate Amount</th>
</tr>
</thead>
<tbody>
<tr id="Row2">
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="2" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
Units
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li><a href="#">Microsecond</a></li>
<li><a href="#">oz</a></li>
<li><a href="#">ml</a></li>
<li><a href="#">L</a></li>
<li><a href="#">gms</a></li>
</ul>
</div>
</td>
<td>
<input type="text" name="amount[]" value="3.00" class="form-control" size="9"/>
</td>
</tr>
<tr>
<td><input type="text" name="pack[]" value="" class="form-control" size="8"/></td>
<td><input type="text" name="quantity[]" value="4" class="form-control" size="8"/></td>
<td><input type="text" name="volume[]" value="750" class="form-control" size="8"/></td>
<td>
<div class="btn-group">
<select name="units[]" class="form-control">
<option value="" selected='selected'>Select Unit</option>
<option value="5" >Microsecond</option>
<option value="7" >oz</option>
<option value="9" >ml</option>
<option value="10" >L</option>
<option value="12" >gms</option>
</select>
</div>
</td>
<td><input type="text" name="amount[]" value="7.00" class="form-control" size="9"/></td>
</tr>
</tbody>
</table>
<button style="float:right" class="btnAdd" type="button" class="btn btn-default"><i class="icon-plus"></i> Add New Rebate</button>
</div>
</div> <!-- /span8 -->
<div class="row">
<div class="col-xs-5"></div>
<div style="margin-left: -9px" class="col-xs-5">
<button type="button" class="btn btn-default">Go Back</button>
<button type="submit" class="btn btn-primary">Preview</button>
</div>
</div>
</div>
</form>
我通过单击一个按钮来动态地将行附加到表中（该按钮存在于一个标记中，您可以在上面的代码中看到）。我为动态添加行编写的jQuery代码如下：
/*JQuery for appending rows at the end of table*/
<script language="javascript">
$( document ).ready(function() {
$('.btnAdd').click(function () {
var count = 1,
first_row = $('#Row2');
//while (count-- > 0) first_row.clone().appendTo('#blacklistgrid');
while (count-- > 0) first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
});
});
</script>
现在我面临的问题是，如果我在表的末尾附加一行或多行，在每个附加行的文本字段中填充数据，并通过单击"提交"按钮提交表单，那么在$_POST中，我无法从附加行中获取数据。我只从以前加载页面时出现的行中获取数据。那么，有人能帮助我从动态附加的行中获取值吗？
动态附加表行的HTMl代码如下：
<tr>
<td>
<input class="form-control" type="text" size="8" value="" name="pack[]">
</td>
<td>
<input class="form-control" type="text" size="8" value="2" name="quantity[]">
</td>
<td>
<input class="form-control" type="text" size="8" value="750" name="volume[]">
</td>
<td>
<div class="btn-group">
<button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
Units
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">Microsecond</a>
</li>
<li>
<a href="#">oz</a>
</li>
<li>
<a href="#">ml</a>
</li>
<li>
<a href="#">L</a>
</li>
<li>
<a href="#">gms</a>
</li>
</ul>
</div>
</td>
<td>
<input class="form-control" type="text" size="9" value="3.00" name="amount[]">
</td>
</tr>
好吧，你做了正确的事情。请查看输入元素的名称字段。
<input type="text" name="pack[]" value="" class="form-control" size="8"/>
请注意使用名称数组作为输入的name="pack[]"。如果已经克隆了表，则将克隆输入元素。既然你没有使用id，这就不是问题。
现在，在发送数据时，在rebates.php中检查表单数据是否存在。这可以通过检查请求方法来完成。这是一种安全的方式。检查成功后，您可以检查字段是否存在
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// handle the fields
$packs = null;
if (isset($_POST['pack']) {
$packs = $_POST['pack'];
}
}
请注意，您正在使用pack而不使用[]来从pack[]输入字段获取输入数据。变量$pack将包含一个数组。如果要检查内容，请使用var_dump($pack);。它应该显示来自可用pack[]元素的所有数据，无论是动态添加的还是静态添加的。
然后，如果你已经收集了所有的数据，你就必须循环它。这可以用for或foreach循环来完成。
if ($packs != null) {
foreach($packs as $pack) {
// use the field $pack to do something
echo 'amount of pack : ' . $pack;
}
}
对同样来自数组的其他名称字段执行相同操作。
来自jQuery文档：
注意：使用.clone（）会产生具有重复id属性的元素，这些属性应该是唯一的。在可能的情况下，建议避免克隆具有此属性的元素或使用类属性作为标识符。
您正在用#Row2 id克隆表行。为了避免这种情况：
first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
或者，您可以执行以下操作。。。
while (count-- > 0) first_row.clone().appendTo('#blacklistgrid').attr('id','Row' + $('#blacklistgrid tr').length);
相关文章：
- 从 jquery 动态输入字段获取值
- 角度形式 - 从包装器中的字段获取模型
- 使用Javascript从html字段获取年龄
- 通过ACF从WordPress中的重复字段获取Brightcove视频
- 按标签时间字段获取字段值，如下所示
- 如何在不提交表单的情况下从输入字段获取文件路径
- 使用jQuery从隐藏输入字段获取值的问题
- 如何从输入字段获取多个值并添加到文本区域
- 通过数组中的一个字段获取对象
- PHP和如何在点击连接到每个输入字段的按钮后从多个输入字段获取值
- 从输入字段获取图像信息
- 从隐藏字段获取值- JavaScript
- 通过php从innerhtml字段获取值
- 从多个文件上传字段获取文件名
- 在MVC中通过Jquery从隐藏字段获取多个值
- 从输入字段获取变量值，并在SELECT-WHERE语句中使用它
- Javascript:按特定字段获取所有对象
- 是否可以使用javascript从文件字段获取$_FILES["inputID"]["tm
- 动态 crm - 使用 JavaScript 从 CRM 中的日期和时间字段获取日期字符串值
- 如何使用angular.copy从一个输入字段获取值到另一个输入字段?
