使用jquery向表中添加行，但未使用php提交新行

Posted 2023-05-08

【中文标题】使用jquery向表中添加行，但未使用php提交新行

【英文标题】：Adding rows to table with jquery, but new rows not submitted to form with php

【发布时间】：2022-01-01 11:48:43

【问题描述】：

我对此很接近，我知道，向表中添加新行的 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);
            
        
        ?>

【问题讨论】：

您的 html 无效。 <tbody> 内不能有 <form>。

<form> 需要包裹整个<table>

@ohgodpleasehelpme 你愿意接受任何人的帮助，还是只接受上帝的帮助？

谢谢@Barmar

我认为您的问题也出在您的 PHP 代码中，您在循环中覆盖了 foreach $partid 的变量，这就是为什么您看不到其他值的原因，请更改$partid 不覆盖变量。

【参考方案1】：

您的问题在于您的 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>

【讨论】：

非常感谢我的朋友，现在 php 也已更正，一切正常！

【参考方案2】：

考虑以下内容。

$(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/bootstrap@5.1.3/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 正确构建所有部分。