Question

我正在寻找克隆/重命名或重新创建地址字段的有效方法，以提供在同一页面上提交多个地址的功能。所以使用这样的表单示例：

<div id="addresses">
  <div class="address">
    <input type="text" name="address[0].street">
    <input type="text" name="address[0].city">
    <input type="text" name="address[0].zip">
    <input type="text" name="address[0].state">
  </div>
</div>
<a href="" id="add_address">Add address form</a>

据我所知，有两种选择：

按字段重新创建表单字段并增加详细的索引：

var index = $(".address").length;

$('<`input`>').attr({
name: 'address[' + index + '].street',
type: 'text'
}).appendTo(...);

$('<`input`>').attr({
name: 'address[' + index + '].city',
type: 'text'
}).appendTo(...);

$('<`input`>').attr({
name: 'address[' + index + '].zip',
type: 'text'
}).appendTo(...);

$('<`input`>').attr({
name: 'address[' + index + '].state',
type: 'text'
}).appendTo(...);

克隆现有图层并替换克隆中的名称：

$("div.address").clone().appendTo($("#addresses"));

你建议使用哪一个更有效率？如果它的＃2可以请你建议我如何进行搜索并用[1]（[n]）替换所有出现的[0]。谢谢。

Answer 1

理论上，最简单的方法是克隆然后更改名称：

var newaddress= $("#addresses div.address").eq(0).clone();
newaddress.find('input').each(function() {
    this.name= this.name.replace('[0]', '['+i+']');
});
$('#addresses').append(newaddress);

然而：

一个。 jQuery的clone()是一件非常糟糕的工作。在IE上，它将节点序列化为HTML，使用regex（！）处理HTML字符串以删除其bodge-job内部ID属性，然后要求浏览器重新解析它。这是我最不喜欢的jQuery部分之一：它非常容易出错，丢失一些信息，并且速度很慢（不是说速度对于你在这里做的非常小的工作很重要）。

浏览器的本地cloneNode(true)方法要好得多，但如果你正在使用jQuery，你就无法真正使用它，因为它会复制jQuery的内部ID，可能会使其脚本混乱。啊。真是一团糟。

湾当您更改输入的名称时，无论是input.name如此，还是使用示例中的attr()，IE＆lt; = 7都会出现问题。

特别是，尽管它会使用正确的控件名称提交输入，但它们不会在form.elements HTMLCollection（或form本身的正确名称下编入索引，但您不应该'无论如何都要用它。如果您选择基于ID或jQuery选择器的输入而不是旧式HTMLCollection接口，则这不一定是个问题。更糟糕的是，如果您使用任何按钮，则单选按钮将无法正确命名。

如果您担心这一点，我担心使用innerHTML / html()创建div，就像在pst的答案中一样，是您唯一的选择。（您始终可以将这两者结合使用，使用HTML创建，然后使用text()，attr()，val()等更改其他属性和文本内容，以避免在您离开时出现通常的HTML转义问题将文本字符串粘贴到HTML中。）

Answer 2

如果你写得很清楚，那就不那么冗长了:-)我可能只是使用克隆和追加。然而，你会得到重复的名字。如果您的后端可以正确处理“address [] .street”，这不是什么大问题，但它可能没有，在这种情况下，您需要在克隆后进行清理。因此，我建议“将其隐藏在整洁的构建器功能中”。

function createAddress (index) {
  return jQuery(replace('\
    <div class="address">\
      <input type="text" name="address[{i}].street">\
      <input type="text" name="address[{i}].city">\
      <input type="text" name="address[{i}].zip">\
      <input type="text" name="address[{i}].state">\
    </div>\
    ', {i: index}))
}

其中replace是一些理解简单插值映射的整洁函数。我更喜欢“将标记保持在看起来像标记的东西”。

担心这里的表现可能是不合理的。

Answer 3

我相信我正在经历同样的事情并找到了一些很好的资源：

<script type="text/javascript">
    function trimNums(stringToTrim)
    {
        return stringToTrim.replace(/\d+$/,"");
    }
    function dupForm(divId, divClass, btnAdd, btnRm)
    {
    //alert(divId+'   '+divClass);
        var num     = $(divClass).length;
        var newNum  = new Number(num + 1);
        var i;
        var newElem = $('#' + divId + num).clone().attr('id', divId + newNum).fadeIn('slow');
        for (i=0; i < newElem.children().length; i++)
        {
            var attrId = trimNums(newElem.children(':eq('+i+')').attr('id'));
            var attrName = trimNums(newElem.children(':eq('+i+')').attr('name'));
            newElem.children(':eq('+i+')').attr('id', attrId + newNum).val('');
        }
        $('#' + divId + num).after(newElem);
        $('#' + btnRm).attr('disabled','');
        if (newNum == 15)
            $('#' + btnAdd).attr('disabled','disabled');
    }
    function rmForm(divId, divClass, btnAdd, btnRm)
    {
        var num = $(divClass).length;
        $('#' + divId + num).remove();
        $('#' + btnAdd).attr('disabled','');
        if (num-1 == 1)
            $('#' + btnRm).attr('disabled','disabled');
    }
</script>

和html代码是：

<form id="myForm" action="testingForm.php" method="post">
<div id="input1" style="margin-bottom:4px;" class="clonedInput">
    Part #: <input name="part[]" type="text" id="part1" size="10" maxlength="15" />
    Description: <input name="description[]" type="text" id="description1" size="30" maxlength="50" />
    Qty: <input name="quantity[]" type="text" id="quantity1" size="5" maxlength="5" />

...

使用jQuery克隆和重命名表单元素

3 个答案: