克隆形式和增量
我有一个下面的表单,我想克隆它,增加 id(att1) 及其输入、文本区域等,然后附加到与会者 div 中。非常感谢任何帮助。一直在伤透我的头......
我所拥有的只是......
$(function () {
var index = 1;
$(".add").click(function () {
index++;
$("#att1").clone(true).removeAttr("id").attr("id", "att" + index).appendTo("#attendees");
alert(index);
});
});
Html:
<div id="attendees">
<div id="att1">
<fieldset>
<legend><span class="legend">Attendee 1 Booking Details</span></legend>
<p name="test">
<label for="A_Title_1">Title: <span class="req">*</span></label>
<input name="A_Title_1" id="A_Title_1" value="" type="text" class="f_input" />
</p>
<p>
<label for="A_Forename_1">Forename: <span class="req">*</span></label>
<input name="A_Forename_1" id="A_Forename_1" type="text" class="f_input" />
</p>
<p>
<label for="A_Surname_1">Surname: <span class="req">*</span></label>
<input name="A_Surname_1" id="A_Surname_1" type="text" class="f_input" />
</p>
<p>
<label for="A_Info_1">Additional Info: </label>
<textarea name="A_Info_1" id="A_Info_1" cols="20" rows="10"></textarea>
<span class="info">Please include any infomation relating to dietary/ access/special requirements you might have.</span>
</p>
</fieldset>
</div>
<a href="#" class="add">Add more</a>
</div>
I have a form below that I want to clone, increment the id(att1) and it's inputs, textareas etc and append to the attendees div. Any help much appreciated. Been wrecking my head...
All I have is...
$(function () {
var index = 1;
$(".add").click(function () {
index++;
$("#att1").clone(true).removeAttr("id").attr("id", "att" + index).appendTo("#attendees");
alert(index);
});
});
Html:
<div id="attendees">
<div id="att1">
<fieldset>
<legend><span class="legend">Attendee 1 Booking Details</span></legend>
<p name="test">
<label for="A_Title_1">Title: <span class="req">*</span></label>
<input name="A_Title_1" id="A_Title_1" value="" type="text" class="f_input" />
</p>
<p>
<label for="A_Forename_1">Forename: <span class="req">*</span></label>
<input name="A_Forename_1" id="A_Forename_1" type="text" class="f_input" />
</p>
<p>
<label for="A_Surname_1">Surname: <span class="req">*</span></label>
<input name="A_Surname_1" id="A_Surname_1" type="text" class="f_input" />
</p>
<p>
<label for="A_Info_1">Additional Info: </label>
<textarea name="A_Info_1" id="A_Info_1" cols="20" rows="10"></textarea>
<span class="info">Please include any infomation relating to dietary/ access/special requirements you might have.</span>
</p>
</fieldset>
</div>
<a href="#" class="add">Add more</a>
</div>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(5)
请参阅小提琴。
将类
attendee
添加到div id="att1"
和 JS:
See the fiddle.
Add a class
attendee
to thediv id="att1"
And the JS:
试试这个
需要对您的 HTML 进行一些调整,我会将添加链接移出与会者 div。
Try this
Requires a few tweaks to your HTML, I would move the add link out of the attendees div.
这个例子可能对你有帮助。 示例
This example might help you. example
我知道这是旧线程..我只是想分享增加 id 的简单方法。我在所有克隆元素
更新中使用相同的类:
这种更优雅的方式:
i know it's old thread.. i just wanna share simply way to increment id. i'm using same class in all cloned element
UPDATE :
this more elegance way :
我在其他地方发布了相同的答案,但在这里我认为它也适用于这个问题。
我创建了一个“原始”元素并将其隐藏在页面上。我将“---”附加到需要在原始元素的任何子元素中递增的任何属性的值。
每当用户单击按钮来创建原始版本的克隆时,我都会创建一个克隆,然后将“---”全局替换为该克隆的 HTML 中的当前索引。像这样的事情:
我使用数据属性来存储incrementedFieldNum的更新值(上面的代码中未显示)。
希望这有帮助。它的代码少了很多,我认为这是一个更通用的解决方案。我有很多嵌套元素需要具有递增的 ID 和名称,因此像 @Fierceblood 中的解决方案这样的解决方案是不切实际的。
I posted this same answer elsewhere, but here I think it applies to this question too.
I created an 'original' element and hid it on the page. I appended "---" to the value of any attribute that needed to be incremented within any child elements of the original.
Whenever the user clicked a button to create a clone of the original, I created a clone, then globally replaced "---" with the current index within that clone's HTML. Something like this:
I used a data attribute to store updated values of incrementedFieldNum (not shown in the code above).
Hopefully that helps. It's a lot less code and it's a more general solution I think. I had a lot of nested elements that needed to have incremented IDs and names, so a solution like the one from @Fierceblood was impractical.