使用jQuery克隆和重命名表单元素
我正在寻找一种有效的方法来克隆/重命名或重新创建地址字段，以提供在同一页上提交多个地址的能力。所以在表单示例中如下所示：
<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索引= $(".address").length；$('<input>').attr({名称：‘地址’+索引+ '.street'，类型：‘文本’}).appendTo(...)；$('<input>').attr({名称：‘地址’+索引+ '.city'，类型：‘文本’}).appendTo(...)；$('<input>').attr({ name：'address‘+ index + '.zip'，type：'text’}).appendTo(...)；$('<input>').attr({ name：'address‘+ index + '.state'，键入：'text’}).appendTo(...);
- Clone现有图层并替换克隆中的名称：
$("div.address").clone().appendTo($("#addresses"));
你推荐使用哪一个更有效，如果它是第二个，你能建议我如何去搜索和替换所有出现的1吗？谢谢。
回答 3
Stack Overflow用户
发布于 2010-04-16 08:31:44
从理论上讲，最简单的方法是克隆然后更改名称：
var newaddress= $("#addresses div.address").eq(0).clone();
newaddress.find('input').each(function() {
this.name= this.name.replace('[0]', '['+i+']');
});
$('#addresses').append(newaddress);但是：
a. jQuery的clone()是一件非常讨厌的工作。在IE上，它将节点序列化为HTML，并使用regex (!)处理HTML字符串删除其bodge-job内部ID属性，然后请求浏览器重新解析它。这是我最不喜欢的jQuery部分之一:它非常容易出错，丢失一些信息，而且速度很慢(对于您在这里似乎正在做的非常小的工作来说，速度并不重要)。
浏览器的原生cloneNode(true)方法要好得多，但是如果您正在做jQuery工作，就不能真正使用它，因为它会复制jQuery的内部ids，这可能会混淆它的脚本。呃。啊!怎么这么乱呀。
b.当您更改输入的名称时，无论是像这里那样使用input.name，还是像示例中那样使用attr()，在IE<=7中都会出现问题。
特别是，尽管它将提交具有正确的控件名称的输入，但它们不会在form.elements HTMLCollection (或form本身，尽管您无论如何都不应该使用它)中以正确的名称进行索引。如果您基于if或jQuery选择器而不是老式的HTMLCollection界面来选择输入，那么这不一定是问题。更糟糕的是，如果您使用任何单选按钮，将不会正确地对其进行名称分组。
如果您担心这一点，我担心使用innerHTML/html()创建div是您唯一的选择，就像pst的答案一样。(您总是可以将两者结合起来，使用HTML创建，然后使用text()、attr()、val()等更改其他属性和文本内容，以避免在将文本字符串粘贴到HTML中时出现常见的HTML转义问题。)
Stack Overflow用户
发布于 2010-04-16 08:20:30
如果你把它写得井井有条，它就不那么冗长了:-)我可能只使用clone和append。但是，您会得到重复的名称。如果你的后端能够正确地处理"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是一些整洁的函数，它理解简单的插值映射。我更喜欢“把标记放在看起来像标记的东西里”。
在这里担心性能可能是没有根据的。
Stack Overflow用户
发布于 2013-01-19 05:55:34
我相信我正在经历同样的事情，并找到了一些很好的资源，如下所示：
<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" />……
https://stackoverflow.com/questions/2649798
复制相似问题