我很接近這一點，我知道，向表中添加新行的 jquery 運行良好，但是當提交表單時，我只從第一行獲取輸入值（每行都有一些輸入）。我無法弄清楚為什么其余的行，無論存在多少行，都沒有在陣列中被選中。
JS：
//add rows
$("#addrow").click(function(){
i=1;
var row = '<tr>'
'<td><input type="checkbox" name="record[]" style="margin:0 10px 0 -15px"></td>'
'<td><input class="form-control" type="number" name="partid[]" id="pid' i '"></td>'
'<td><input class="form-control" type="number" min="1" step="1" name="partqty[]" id="pqty' i '" placeholder="Qty"></td>'
'<td><input class="form-control" type="number" min="0.0001" step="0.0001" name="partlength[]" id="pqty' i '" placeholder="Length"></td>'
'</tr>';
i ;
$("#partstable").append(row);
});
表格：
<input type="button" class="btn btn-dark" id="addrow" value="Add Row">
<table id="partstable" style="padding:15px;margin:15px;">
<thead>
<tr>
<th></th>
<th></th>
<th>Qty</th>
<th>Length</th>
</tr>
</thead>
<tbody>
<form action="index.php" method="post">
<tr>
<td><input type="checkbox" name="record[]" style="margin:0 10px 0 -15px"></td>
<td><input class="form-control" type="number" name="partid[]" id="pid[]"></td>
<td><input class="form-control" type="number" min="1" step="1" name="partqty[]" id="pqty[]" placeholder="Qty"></td>
<td><input class="form-control" type="number" min="0.0001" step="0.0001" name="partlength[]" id="pqty[]" placeholder="Length"></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-dark delete-row">Delete Row</button>
<input name="submit" class="btn btn-success" type="submit" value="Submit">
</form>
我希望看到所有行，無論下面陣列中可用的數量如何，但無論我嘗試什么，我都只得到第一行......
<?php
if(isset($_POST['submit'])){
foreach($_POST['partid'] as $partid){
$partid = $_POST['partid'];
print_r($partid);
$partqty = $_POST['partqty'];
print_r($partqty);
$partlength = $_POST['partlength'];
print_r($partlength);
}
}
?>
uj5u.com熱心網友回復：
您的問題出在您的 PHP 代碼中，您只需要像這樣在 PHP 代碼中回圈資料：
<?php
foreach($_POST['partid'] as $key => $val){
$partid = $val;
$partqty = $_POST['partqty'][$key];
$partlength = $_POST['partlength'][$key];
echo $partid." ".$partqty." ".$partlength."</br>";
}
?>
您只需要回圈partid陣列并使用該陣列的鍵，foreach然后選擇每個變數的鍵。
同樣正如@Barmar 提到的那樣修復form標簽位置：
<form action="index.php" method="post">
<input type="button" class="btn btn-dark" id="addrow" value="Add Row">
<table id="partstable" style="padding:15px;margin:15px;">
<thead>
<tr>
<th></th>
<th></th>
<th>Qty</th>
<th>Length</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record[]" style="margin:0 10px 0 -15px"></td>
<td><input class="form-control" type="number" name="partid[]" id="pid[]"></td>
<td><input class="form-control" type="number" min="1" step="1" name="partqty[]" id="pqty[]" placeholder="Qty"></td>
<td><input class="form-control" type="number" min="0.0001" step="0.0001" name="partlength[]" id="pqty[]" placeholder="Length"></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-dark delete-row">Delete Row</button>
<input name="submit" class="btn btn-success" type="submit" value="Submit">
</form>
uj5u.com熱心網友回復：
考慮以下。
$(function() {
//add rows
$("#addrow").click(function() {
var i = $("#partstable tbody tr").length 1;
var row = $("<tr>");
$("<td>").appendTo(row);
$("<input>", {
type: "checkbox",
name: "record[]"
}).appendTo($("td:last", row));
$("<td>").appendTo(row);
$("<input>", {
type: "number",
name: "partid[]",
id: "pid" i,
class: "form-control"
}).appendTo($("td:last", row));
$("<td>").appendTo(row);
$("<input>", {
type: "number",
min: 1,
step: 1,
name: "partqty[]",
id: "pqty" i,
placeholder: "Qty",
class: "form-control"
}).appendTo($("td:last", row));
$("<td>").appendTo(row);
$("<input>", {
type: "number",
min: 0.0001,
step: 0.0001,
name: "partlength[]",
id: "plength" i,
placeholder: "Length",
class: "form-control"
}).appendTo($("td:last", row));
$("#partstable").append(row);
});
$("form").submit(function(event) {
event.preventDefault();
console.log($(this).serialize());
});
})#partstable tbody tr td>input[type='checkbox'] {
margin: 0 10px 0 -15px;
}<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" class="btn btn-dark" id="addrow" value="Add Row">
<form action="index.php" method="post">
<table id="partstable" style="padding:15px;margin:15px;">
<thead>
<tr>
<th></th>
<th></th>
<th>Qty</th>
<th>Length</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="record[]"></td>
<td><input class="form-control" type="number" name="partid[]" id="pid1"></td>
<td><input class="form-control" type="number" min="1" step="1" name="partqty[]" id="pqty1" placeholder="Qty"></td>
<td><input class="form-control" type="number" min="0.0001" step="0.0001" name="partlength[]" id="plength1" placeholder="Length"></td>
</tr>
</tbody>
</table>
<button type="button" class="btn btn-dark delete-row">Delete Row</button>
<input name="submit" class="btn btn-success" type="submit" value="Submit">
</form>有更多代碼，但它使用唯一 ID 正確構建所有部分。
uj5u.com熱心網友回復：
正如@Barmar 在評論中提到的，您的 HTML 無效。
另一個原因是您沒有獲得其他行的輸入值，因為您使用 jQuery 添加它們，并且在您提交表單時它們不在 DOM 樹中。提交按鈕不考慮頁面加載后創建的表單欄位。
$('#id-of-your-form').on('submit', function(e) {
//prevent the default form submission
e.preventDefault();
$.post('URL-you-want-to-post-data-to', $(this).serialize());
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/364146.html
標籤：javascript php 查询
下一篇：使用引導驗證重置整個表單