什么's提交表单后，从post数组中动态附加的表行字段中获取值的问题
What's the issue in getting the values from dynamically appended table row fields in post array after submitting the form?
我有一个HTML表单。这个表单包含HTML表。实际的HTML表非常大。为了供您参考，我在下面展示了一个表单的HTML代码，该表单的表只包含两行：
<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">
<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="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="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');
//while (count-- > 0) $('#blacklistgrid > tbody:last').append(first_row.clone().removeAttr('id'));
//while (count-- > 0) first_row.clone().appendTo('#blacklistgrid').attr('id','Row' + $('#blacklistgrid tr').length);
});
});
</script>
从上面的代码片段中，您可以向我推荐最优化的代码片段。现在我面临的问题是，如果我在表的末尾附加一行或多行，在每个附加行的文本字段中填充数据，并通过单击rebates.php上的$_POST中的"提交"按钮提交表单，我就不会从附加行中获得数据。我只从以前加载页面时出现的行中获取数据。那么，有人能帮助我从动态附加的行中获取值吗？感谢您花费宝贵的时间来理解我的问题。等待您宝贵的答复。不过，如果你需要任何关于这个问题的进一步信息，我可以为你提供同样的信息。我正在使用以下jQuery库：
<script src="http://localhost/smart-rebate-web/web/js/libs/jquery-1.9.1.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/libs/jquery-ui-1.10.0.custom.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/libs/bootstrap.min.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/plugins/validate/jquery.validate.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/Application.js"></script>
<script src="http://localhost/smart-rebate-web/web/js/demo/validation.js"></script>
以下是我测试并运行良好的内容：
.html文件：
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var first_row = $('#Row2').clone();
$('.btnAdd').click(function () {
var count = 1;
first_row.clone().removeAttr('id').appendTo('#blacklistgrid');
});
});
</script>
</head>
<body>
<form action="formdata.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">
<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="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="submit" class="btn btn-primary">Preview</button>
</div>
</div>
</div>
</form>
</body>
</html>
表单数据.php
<?php
print_r($_POST);
?>
返回的样本数据：
Array
(
[company_name] =>
[product_id] => 5
[pack] => Array
(
[0] => a
[1] => b
[2] => c
[3] => d
)
[quantity] => Array
(
[0] => 2
[1] => 4
[2] => 2
[3] => 2
)
[volume] => Array
(
[0] => 750
[1] => 750
[2] => 750
[3] => 750
)
[units] => Array
(
[0] => 7
[1] => 5
[2] => 7
[3] => 7
)
[amount] => Array
(
[0] => 3.00
[1] => 7.00
[2] => 3.00
[3] => 3.00
)
)
正如您所看到的，它添加了您使用jQuery 附加的所有信息
相关文章：
- 在有角度的ui网格中设置动态列的问题
- ReactJS中动态生成的输入文本字段值设置问题
- React Rails应用程序中动态子项的密钥分配问题
- 动态加载的自定义javascript/jQuery/HTML5音频播放器的问题
- Small Javascript从动态表单中删除多个元素的问题
- 动态生成网格样式问题
- 使用PhantomJS下载动态web内容时遇到问题
- 语义UI动态下拉菜单重新初始化问题
- 动态创建foreignGroup并将其添加到svg中有什么问题
- 此代码中动态生成选择框有什么问题
- IE9 动态页面 JS 问题
- 在页面中滑动多个动态部分时出现问题
- 使用 Javascript 动态删除行.我的代码有什么问题
- 用Javascript为QCM动态生成问题——未捕获类型错误
- 我可以设置这个吗'某事'在该服务中动态创建的嵌套对象中的服务?(可能是范围问题）
- 使用动态父和子复选框时出现问题
- 我无法将变量从动态列表传递到php页面进行处理.这是我不理解的逻辑问题吗
- 少.CSS 和 CSS 文件替换为 JS 动态问题
- slideup函数不适用于动态问题(静态问题可以）
- jquery砌体动态问题
