将输入名称动态添加到表单时更新输入名称的最佳方法是什么？

Question

当动态向 POST 数组添加更多内容时，我正在尝试提出一种简洁有效的方式来处理表单输入名称。

例如，如果我有以下表格：

<fieldset>
   <input type="text" name="users-0.firstname" />
   <input type="text" name="users-0.lastname" />
</fieldset>

然后我单击“添加更多”按钮，该按钮复制该 HTML 并将其添加回文档中。结果：

<fieldset>
   <input type="text" name="users-0.firstname" />
   <input type="text" name="users-0.lastname" />
</fieldset>

我正在尝试找到增加该名称索引的最佳方法，以便可以使用服务器上的数据。到目前为止，我一直在使用以下代码：

$('.addmore').click(function()
{
   var $button   = $(this);
   var $fieldset = $button.prev('fieldset');
   var $newset   = $('<div class="new">' + $fieldset[0].innerHTML + '</div>');

   $newset.insertBefore($button);
   updatenames($newset, $('fieldset').length + 1);
});

function updatenames($set, newIndex)
{
   /*
      updates input names in the form of
      set-index.name
      set-index
   */
   var findnametype = function(inputname)
   {
      if (inputname.indexOf('-') != -1 && inputname.indexOf('.') != -1)
      {
         var data1 = inputname.split('-');
         var data2 = data1[1].split('.');

         // [type, set, index]
         return [1, data1[0], parseInt(data2[0])]
      }

      if (inputname.indexOf('-') != -1 && inputname.indexOf('.') == -1)
      {
         var data = inputname.split('-');
         return [2, data[0], data[1]];
      }

      return false;
   };

   var type = findnametype($set.find('input:eq(0)')[0].name);

   $set.find('input, select').each(function()
   {
      var $input   = $(this);

      var oldname  = $input[0].name;
      var newname  = false;

      switch (type[0])
      {
         case 1: newname = oldname.replace('-' + type[2], '-' + newIndex);
            break;
         case 2: newname = oldname.replace('-' + type[2], '-' + newIndex);
            break;
      }

      $input[0].name = newname;
   });

   return type;
}

updatenames 函数是我最近使用的函数的变体。在这种情况下，我检查以查找输入名称的格式。然后我增加索引。

您可能已经注意到，递增发生在 DOM 中。作为我的问题的“第 2 部分”，我想了解如何让该对象返回给我，然后插入到 DOM 中。

类似：

$newset = updatenames($newset, $('fieldset').length +1);
$newset.insertBefore($button);

感谢您的帮助。干杯。

Answer 1

您是否考虑过使用基于数组的字段名称？你根本不需要改变这些：

<input type="text" name="users.firstname[]" />
<input type="text" name="users.lastname[]" />

这是否适合您当然取决于您将如何处理这些字段。

Answer 2

<script type="text/javascript">
    $(document).ready(function () {
        $('.addmore').click(function () {
            var fieldset = $(this).prev('fieldset');
            var newFieldset = fieldset.clone();
            incrementFieldset(newFieldset);
            newFieldset.insertBefore($(this));
        });
    });

    function incrementFieldset(set) {
        $(set).find('input').each(function () {
            var oldName = $(this).attr('name');
            var regex = /^(.*)-([0-9]+)\.(.*)$/;
            var match = regex.exec(oldName);
            var newName = match[1] + '-' + (parseInt(match[2]) + 1) + '.' + match[3];
            $(this).attr('name', newName);
        });
    }
</script>

<fieldset>
   <input type="text" name="users-0.firstname" />
   <input type="text" name="users-0.lastname" />
</fieldset>
<input type="button" class="addmore" value="Add" />

Answer 3

<fieldset>
    <input index=1 var=user prop=firstname />
    <input index=1 var=user prop=lastname />
</fieldset>

<fieldset>
    <input index=2 var=user prop=firstname />
    <input index=2 var=user prop=lastname />
</fieldset>

在您提交表单之前

获取自定义属性并构建您的“名称”属性

[更新]

它的jsp，但你转换成php应该不难

<%
for (int i = 0; i < 1000; i++) {
%>

<fieldset>
<input index=<%=i%> var=user prop=firstname />
<input index=<%=i%> var=user prop=lastname />
</fieldset>
<%
}
%>

对于js代码

$('button').click(function(){

   $('input').each(function(i, node){
      var $node = $(node);

      $node.attr('name', $node.attr('var') + $node.attr('index') + "."+ $node.attr('prop'))

   });

});