克隆表单和增量ID

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.

如果你愿意,你也可以使用一个闭包,即

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.