Javascript 如何在表单提交后使用JQuery从附加到HTML表的字段中获取$\u POST数组中的值?
我有一个HTML表单。此表单包含HTML表。实际的HTML表非常大。为了供您参考,我在下面展示了一个表单的HTML代码,其中tablw只包含两条记录:Javascript 如何在表单提交后使用JQuery从附加到HTML表的字段中获取$\u POST数组中的值?,javascript,jquery,html,forms,post,Javascript,Jquery,Html,Forms,Post,我有一个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="c
<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文档:
注意:使用.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);
嗯,你做得对。请查看输入元素的名称字段
<input type="text" name="pack[]" value="" class="form-control" size="8"/>
请注意,您正在使用pack
而不使用[]
从pack[]
输入字段获取输入数据。变量$pack
将包含一个数组。如果要检查内容,请使用var\u dump($pack)代码>。它应该显示可用pack[]
元素中的所有数据,可以是动态添加的,也可以是静态添加的
然后,如果你已经收集了所有的数据,你必须循环使用它。它可以使用for或foreach循环来完成
if ($packs != null) {
foreach($packs as $pack) {
// use the field $pack to do something
echo 'amount of pack : ' . $pack;
}
}
对同样来自数组的其他名称字段执行相同的操作 我试过你的代码,但结果还是一样。无法从动态追加的行中获取值。你还有其他的招数吗?是的,当然。我已经修改了我的问题,您可以在上面的问题主体中看到动态追加表行的代码。嗯,我已经测试了您的代码,它对我来说运行良好。我又添加了两行,并在这里提交了表格,这是我的编码帖子的样子:公司名称=&product id=&pack[]=&quantity[]=2&volume[]=750&amount[]=3.00&pack[]=&quantity[]=4&volume[]=750&units[]=7.00&pack[]=2&volume[]=750&amount[]=999&pack[]=2&volume[]=750&amount[]=888我修改了金额输入,如您所见,有两个值888和999。我认为问题出在你的PHP代码中。怎么可能PHP代码有问题呢?我只是在打印$\u POST而已。你能在这里发布这个:var\u dump(file\u get\u contents()php://input"));我试过你的代码,但结果还是一样。无法访问$\u POST中动态应用行中的值。OT:您应该将tr添加到tbody,而不是表本身
<input type="text" name="pack[]" value="" class="form-control" size="8"/>
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// handle the fields
$packs = null;
if (isset($_POST['pack']) {
$packs = $_POST['pack'];
}
}
if ($packs != null) {
foreach($packs as $pack) {
// use the field $pack to do something
echo 'amount of pack : ' . $pack;
}
}