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

Question

我有一个表单，可以通过单击按钮添加行。它们也可以通过点击删除。

\n

我的页面加载 html 如下所示：

\n

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

\n

当存在多个元素时，我想将所有结果分组在一起invoicerow。

\n

现在，当我发布发布的数组时，它看起来像这样：

\n

Array\n(\n    [other_info] => \n    [invoice_row] => Array\n        (\n            [0] => Array\n                (\n                    [invoice_quantity] => \n                )\n\n            [1] => Array\n                (\n                    [invoice_title] => \n                )\n\n            [2] => Array\n                (\n                    [invoice_price] => \n                )\n\n            [3] => Array\n                (\n                    [invoice_desc] => \n                )\n\n            [4] => Array\n                (\n                    [invoice_quantity] => \n                )\n\n            [5] => Array\n                (\n                    [invoice_title] => \n                )\n\n            [6] => Array\n                (\n                    [invoice_price] => \n                )\n\n            [7] => Array\n                (\n                    [invoice_desc] => \n                )\n\n        )\n\n)\n

\n

虽然这就是我正在寻找的：

\n

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

\n

我知道我可以将其更改invoice_row[][invoice_price]为invoice_row[0][invoice_price]例如对它们进行分组，但这不起作用，因为我的输入字段可以动态添加和删除。

\n

对此最好的解决方案是什么？

\n

这是我添加和删除输入字段的代码：

\n

$(".add_invoice_row").click(function () {\n  var invoicehtml = \'\' + \n  \'<div class="invoicerow">\' +\n  \'  <div class="row">\' +\n  \'    <div class="col-12 col-md-2">\' +\n  \'      <label for="">Aantal</label>\' +\n  \'      <div class="inputstyle mb-10">\' +\n  \'        <input type="text" name="invoice_row[][invoice_quantity]">\' +\n  \'      </div>\' +\n  \'    </div>\' +\n  \'    <div class="col-12 col-md-5">\' +\n  \'      <label for="">Titel</label>\' +\n  \'      <div class="inputstyle mb-10">\' +\n  \'        <input type="text" name="invoice_row[][invoice_title]">\' +\n  \'      </div>\' +\n  \'    </div>\' +\n  \'    <div class="col-12 col-md-2">\' +\n  \'      <label for="">Prijs</label>\' +\n  \'      <div class="inputstyle mb-10">\' +\n  \'        <input type="text" name="invoice_row[][invoice_price]">\' +\n  \'      </div>\' +\n  \'    </div>\' +\n  \'    <div class="col-12 col-md-2">\' +\n  \'      <label for="">Totaal</label>\' +\n  \'      <div>\xe2\x82\xac99,05</div>\' +\n  \'    </div>\' +\n  \'    <div class="col-12 col-md-1 d-flex align-center">\' +\n  \'      <i class="fas fa-trash-alt delete_invoice_row"></i>\' +\n  \'    </div>\' +\n  \'    <div class="col-12">\' +\n  \'      <label for="">Beschrijving</label>\' +\n  \'      <div class="inputstyle mb-10">\' +\n  \'        <textarea type="text" name="invoice_row[][invoice_desc]"></textarea>\' +\n  \'      </div>\' +\n  \'    </div>\' +\n  \'  </div>\' +\n  \'</div>\' +\n  \'\';\n  $(\'.new_invoice_row\').append(invoicehtml);\n\n  create_invoice_form = $(".create_invoice_form").serialize();\n  $.ajax({\n    type:\'post\',\n    url:"invoice_custom.php",\n    data:({\n      create_invoice_form: create_invoice_form\n    }),\n    success:function(data){\n      console.log(data);\n    }\n  });\n});\n\n$(document).on(\'click\', \'.delete_invoice_row\', function () {\n  $(this).closest(\'.invoicerow\').remove();\n});\n

\n

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

\n

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 中留下了一条评论，其中字符串替换将进行，但由于您已经接受了另一个答案，所以我将其留给您来完成。