Question

考虑以下形式：

<form>
    <input type="button" value="Input Button"/>
    <input type="checkbox" />

    <input type="file" id="file"/>
    <input type="hidden" id="hidden"/>
    <input type="image" id="image" />

    <input type="password" id="password" />
    <input type="radio" id="radio" />
    <input type="reset" id="reset" />
</form>

利用Javascript（和jQuery），克隆整个表单并增加每个id的最简单方法是什么，以确保唯一性。

使用jQuery我会假设您最初会通过clone()克隆表单并遍历克隆的对象id并添加新的ID fieldname1，fieldname2等。但是，我对jQuery的了解不是太大，这个项目几乎杀了我。

任何帮助都会很棒！

Answer 1

你会clone()它，并且在将克隆元素附加到DOM之前，你将运行并将数字添加到每个id属性。

(function() {
    var count = 0;

    window.duplicateForm = function()

        var source = $('form:first'),
            clone = source.clone();

        clone.find(':input').attr('id', function(i, val) {
            return val + count;
        });

        clone.appendTo('body');

        count++;
    };

})();

jsFiddle

此内容以0开头，但您可以使用count轻松启动1。

如果您愿意，也可以使用closure，即

var cloneForm = function(form, start) {
   start = start || 0;

   return function() {
        var clone = form.clone();

        clone.find(':input').attr('id', function(i, val) {
            return val + start;
        });
        start++;

        return clone;
    };
};

然后你会......

var cloneContactForm = cloneForm($('#contact-form'), 5);

// Now I want to clone it and put it somewhere.
$(cloneContactForm()).appendTo('body');

jsFiddle

Answer 2

这是一个没有更新任何ID的解决方案：

为所有表单提供相同的class
将所有字段设为name
请参阅与班级
请参阅名称为

实施例：如何为每个克隆表单赋予不同的id，然后对每个输入元素使用name？

<form class="theForm">
    <input type="password" name="password" />
</form>

然后用

container.append($('.theForm:first').clone());

（或将第一个表单缓存在变量中）。

最后，使用以下命令访问输入字段：

$('form.theForm:eq(0) [name=password]') // password from first form
$('form.theForm:eq(1) [name=password]') // password from second form
...

如果选择器查找效率是一个因素，那么有几种简单的方法可以加快速度，例如缓存具有不同形式的变量，缓存$('.theForm')和使用eq()方法等。

示例jsFiddle在这里：http://jsfiddle.net/orip/dX4sY

克隆表单和增量ID

2 个答案: