javascript - 在 PHP 中使用序列化 jQuery 传递多个参数

Question

我在序列化表单方面遇到问题。我需要传递多行来创建发票，但它只传递第一行。

这是一个表格:

<form action="" id="generate_invoice" method="POST">
  <td><input type="number" class="form-control n_invoice" name="n_invoice[]"></td>
  <td><input type="date" class="form-control data" name="data[]"></td>
  <td><input type="text" class="form-control description" name="description[]"></td>
  <td><input type="number" class="form-control price" name="price[]" step=any></td>
  <td><input type="number" class="form-control vat" name="vat[]">
</form>

这是一个添加新行的函数:

function addrow_invoice() {
  var i = $('#invoiceTable tr').length;
  var tr = '<tr>'+
    '<td><input type="checkbox" class="case"/></td>'+
    '<td></td>'+
    '<td></td>'+
    '<td><input type="text" class="form-control description" name="description[]"></td>'+
    '<td><input type="number" class="form-control price" name="price[]"></td>'+
    '<td><input type="number" class="form-control vat" name="vat[]"></td>'+
    '</tr>';
  $('table#invoiceTable').append(tr);
  i++;
};

这是一个测试:

for($i = 0; $i<count($_POST['description']); $i++) 
{
  echo "{$_POST['description'][$i]}";
  echo "<br>";
}

Answer 1

问题是因为您的 HTML 无效。 form 需要包装 table 元素，而不是位于其中。由于 HTML 无效，form 的位置会被移动，以便它不会包装您的 input 元素，因此不会序列化任何内容。

您的 HTML 需要更改为:

<form action="" id="generate_invoice" method="POST">
  <table id="invoiceTable">  
    <tr>
      <td><input type="number" class="form-control n_invoice" name="n_invoice[]"></td>
      <td><input type="date" class="form-control data" name="data[]"></td>
      <td><input type="text" class="form-control description" name="description[]"></td>
      <td><input type="number" class="form-control price" name="price[]" step=any></td>
      <td><input type="number" class="form-control vat" name="vat[]">
    </tr>
    <!-- additional rows appended here... -->
  </table>
</form>