堆栈内存溢出
  繁体   English   中英

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

[英]How to group values posted from HTML form by key if input fields can be dynamically added or deleted

 原文  2022-01-14 14:46:12  3   3    javascript/ html/ jquery/ arrays

问题描述

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

我的 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/

3 个解决方案

解决方案1
 1  2022-01-14 15:05:24

恕我直言：除非真的需要，否则不要将 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()会将模板作为字符串提供给您。

这一切都来自 memory。 如果您想要更多，请提供 JSFiddle :)

解决方案2
 0  2022-01-17 17:50:32

You can use jquery.serializeJSON , a small jquery plugin, to get output in nice JSON format. JSON 可以在服务器端轻松解析。 

 $(".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); } }); */ function onSubmit(form) { var data = $(form).serializeJSON(); console.log(data); console.log(JSON.stringify(data, undefined, 3)); return false; } $(document).on('click', '.delete_invoice_row', function() { $(this).closest('.invoicerow').remove(); });
 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.serializeJSON/3.2.1/jquery.serializejson.min.js"></script> <div class="col-12"> <p>See the console logs for output.</p> <form class="create_invoice_form" method="post" onsubmit='return onSubmit(this)'> <button type='submit'>Submit</button><br><hr> <div class="row"> <div class="col-12 col-md-6"> <label for="">Emailadres</label> <div class="inputstyle mb-10"> <input type="text" name="invoice[mail]" value='abc@gmail.com'> </div> </div> <div class="col-12 col-md-6"> <label for="">Datum</label> <div class="inputstyle mb-10"> <input type="date" name="invoice[date]"> </div> </div> <div class="col-12"> <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]" value='10'> </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]" value='item 1'> </div> </div> <div class="col-12 col-md-2"> <label for="">Prijs ex. BTW</label> <div class="inputstyle mb-10"> <input type="text" name="invoice[row][][invoice_price]" value='btw'> </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]">description</textarea> </div> </div> </div> </div> <div class="new_invoice_row"> </div> </div> </div> </form> </div> <div class="col-12"> <i class="fas fa-plus-square add_invoice_row"></i> </div>

请注意我如何命名输入invoice[row][][invoice_quantity] 。

Output：

{
   "invoice": {
      "mail": "abc@gmail.com",
      "date": "",
      "row": [
         {
            "invoice_quantity": "10",
            "invoice_title": "item 1",
            "invoice_price": "btw",
            "invoice_desc": "description"
         },
         {
            "invoice_quantity": "a",
            "invoice_title": "t",
            "invoice_price": "g",
            "invoice_desc": "sd"
         },
         {
            "invoice_quantity": "3",
            "invoice_title": "3",
            "invoice_price": "3",
            "invoice_desc": "des3"
         }
      ]
   }
}

在 php 中，您可以使用$jObj = json_decode($jsonString);

解决方案3
 0  2022-01-17 22:04:30

为了使动态解决方案（显式将索引添加到表单名称）可靠地工作，您需要做的就是在删除项目时处理重新索引：

$(document).on('click', '.delete_invoice_row', function () {
  $(this).closest('.invoicerow').remove();
  $('.invoicerow').each(function(idx, el) {
    $(el).find('[name^="invoice_row"]').each(function(iidx, iel) {
      $(iel).attr("name", iel.name.replace(/invoice_row\[\d+\]/, "invoice_row[" + idx + "]"));
    });
  });
});

小提琴： https://jsfiddle.net/fg8rwexp/2/

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 动态添加的输入字段没有发布？ 重命名动态添加或删除的表单字段 如何在单个数据库列中插入动态添加的输入字段值？ 如何使用javascript从发布的html表单中获取值 动态将字段添加到HTML表单，发送数据并记住添加的字段和值 动态添加的表单元素未在IE 9中发布 如何验证动态添加的输入字段 动态添加额外的输入字段到html表单 动态创建的表行中未发布输入字段 HTML 中的按钮 onclick 功能不断将表单输入字段重置为默认值。 我怎样才能避免这种情况？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM