Clone form and increment ID

Consider the following form:

<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>

Utilizing Javascript (and jQuery), what would be the easiest way to clone the entire form and increment each individual id within, to ensure uniqueness.

Using jQuery I would assume you would clone the form initially via clone() and iterate through the cloned objects id and add the new id fieldname1, fieldname2 etc. However, my knowledge of jQuery isn't too great and this project is almost开发者_开发问答 killing me.

Any help would be great!

You would clone() it, and before attaching the cloned element to the DOM, you'd run through and add the number to each id attribute.

(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.

This one starts with 0, but you could easily start count with 1.

You could also use a closure if you wanted, i.e.

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;
    };
};

Then you would do...

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

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

jsFiddle.

Here's a solution without updating any ids:

1. Give all forms the same class
2. Give all fields a name
3. Refer to cloned forms relative to all the forms with the class
4. Refer to fields with their name

Example: How about giving each cloned form a different id, and then using names for each input element?

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

Then Clone it with

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

(or cache the first form in a variable).

Finally, access the input fields with:

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

If the selector lookup efficiency is a factor here then there are several trivial ways to speed it up, such as caching variables with the different forms, caching $('.theForm') and using the eq() method, etc.

Sample jsFiddle is here: http://jsfiddle.net/orip/dX4sY