javascript - 如果可以动态添加或删除输入字段，如何按键对从 HTML 表单发布的值进行分组

Question

我有一个表单，可以在单击按钮时添加行。它们也可以在单击时删除。
我的页面加载 html 如下所示:

<div class="invoicerow">
  <div class="row">
    <div class="col-12 col-md-2">
      <label for="">Aantal</label>
      <div class="inputstyle mb-10">
        <input type="text" name="invoice_row[][invoice_quantity]">
      </div>
    </div>
    <div class="col-12 col-md-5">
      <label for="">Titel</label>
      <div class="inputstyle mb-10">
        <input type="text" name="invoice_row[][invoice_title]">
      </div>
    </div>
    <div class="col-12 col-md-2">
      <label for="">Prijs</label>
      <div class="inputstyle mb-10">
        <input type="text" name="invoice_row[][invoice_price]">
      </div>
    </div>
    <div class="col-12 col-md-2">
      <label for="">Totaal</label>
      <div>€99,05</div>
    </div>
    <div class="col-12 col-md-1 d-flex align-center">
      <i class="fas fa-trash-alt delete_invoice_row"></i>
    </div>
    <div class="col-12">
      <label for="">Beschrijving</label>
      <div class="inputstyle mb-10">
        <textarea type="text" name="invoice_row[][invoice_desc]"></textarea>
      </div>
    </div>
  </div>
</div>

当有多个 invoicerow 时，我想将所有结果组合在一起存在的元素。
现在，当我发布发布的数组时，如下所示:

Array
(
    [other_info] => 
    [invoice_row] => Array
        (
            [0] => Array
                (
                    [invoice_quantity] => 
                )

            [1] => Array
                (
                    [invoice_title] => 
                )

            [2] => Array
                (
                    [invoice_price] => 
                )

            [3] => Array
                (
                    [invoice_desc] => 
                )

            [4] => Array
                (
                    [invoice_quantity] => 
                )

            [5] => Array
                (
                    [invoice_title] => 
                )

            [6] => Array
                (
                    [invoice_price] => 
                )

            [7] => Array
                (
                    [invoice_desc] => 
                )

        )

)

虽然这是我正在寻找的:

Array
(
    [other_info] => 
    [invoice_row] => Array
        (
            [0] => Array
                (
                    [invoice_quantity] => 
                    [invoice_title] => 
                    [invoice_price] => 
                    [invoice_desc] => 
                )

            [1] => Array
                (
                    [invoice_quantity] => 
                    [invoice_title] => 
                    [invoice_price] => 
                    [invoice_desc] => 
                )

        )

)

我知道我可以更改 invoice_row[][invoice_price]至invoice_row[0][invoice_price]例如对它们进行分组，但这不起作用，因为我的输入字段可以动态添加和删除。
什么是最好的解决方案？
这是我添加和删除输入字段的代码:

$(".add_invoice_row").click(function () {
  var invoicehtml = '' + 
  '<div class="invoicerow">' +
  '  <div class="row">' +
  '    <div class="col-12 col-md-2">' +
  '      <label for="">Aantal</label>' +
  '      <div class="inputstyle mb-10">' +
  '        <input type="text" name="invoice_row[][invoice_quantity]">' +
  '      </div>' +
  '    </div>' +
  '    <div class="col-12 col-md-5">' +
  '      <label for="">Titel</label>' +
  '      <div class="inputstyle mb-10">' +
  '        <input type="text" name="invoice_row[][invoice_title]">' +
  '      </div>' +
  '    </div>' +
  '    <div class="col-12 col-md-2">' +
  '      <label for="">Prijs</label>' +
  '      <div class="inputstyle mb-10">' +
  '        <input type="text" name="invoice_row[][invoice_price]">' +
  '      </div>' +
  '    </div>' +
  '    <div class="col-12 col-md-2">' +
  '      <label for="">Totaal</label>' +
  '      <div>€99,05</div>' +
  '    </div>' +
  '    <div class="col-12 col-md-1 d-flex align-center">' +
  '      <i class="fas fa-trash-alt delete_invoice_row"></i>' +
  '    </div>' +
  '    <div class="col-12">' +
  '      <label for="">Beschrijving</label>' +
  '      <div class="inputstyle mb-10">' +
  '        <textarea type="text" name="invoice_row[][invoice_desc]"></textarea>' +
  '      </div>' +
  '    </div>' +
  '  </div>' +
  '</div>' +
  '';
  $('.new_invoice_row').append(invoicehtml);

  create_invoice_form = $(".create_invoice_form").serialize();
  $.ajax({
    type:'post',
    url:"invoice_custom.php",
    data:({
      create_invoice_form: create_invoice_form
    }),
    success:function(data){
      console.log(data);
    }
  });
});

$(document).on('click', '.delete_invoice_row', function () {
  $(this).closest('.invoicerow').remove();
});

jsFiddle 示例:https://jsfiddle.net/xbLyp9f2/1/

Answer 1

恕我直言:除非真的需要，否则不要将 HTML 文字嵌入到您的 JS 代码中。将 HTML 模板隐藏在包含替换文本标记的脚本标记中(例如，用于索引)。
然后，您可以为每个添加的行插入一个实际的索引值(我通常将 1 添加到现有的最高行值):

<script id="rowtemplate">
    <div class="invoicerow">
      <div class="row">
        <div class="col-12 col-md-2">
          <label for="">Aantal</label>
          <div class="inputstyle mb-10">
            <input type="text" name="invoice_row[{row}][invoice_quantity]">
          </div>
        </div>
        <div class="col-12 col-md-5">
          <label for="">Titel</label>
          <div class="inputstyle mb-10">
            <input type="text" name="invoice_row[{row}][invoice_title]">
          </div>
        </div>
        <div class="col-12 col-md-2">
          <label for="">Prijs</label>
          <div class="inputstyle mb-10">
            <input type="text" name="invoice_row[{row}][invoice_price]">
          </div>
        </div>
        <div class="col-12 col-md-2">
          <label for="">Totaal</label>
          <div>{total}</div>
        </div>
        <div class="col-12 col-md-1 d-flex align-center">
          <i class="fas fa-trash-alt delete_invoice_row"></i>
        </div>
        <div class="col-12">
          <label for="">Beschrijving</label>
          <div class="inputstyle mb-10">
            <textarea type="text" name="invoice_row[{row}][invoice_desc]"></textarea>
          </div>
        </div>
      </div>
    </div>
</script>

$('#rowtemplate').html()会给你模板作为一个字符串。
https://jsfiddle.net/TrueBlueAussie/j41fzubp/2/
我在 JSFiddle 中留下了一条评论，字符串替换将去哪里，但是由于您已经接受了另一个答案，所以我将它留给您完成。