CODEWITHSUNDEEP
jquery
nav100
nav100

Reputation: 3133

Clone div and its inner elements

I am trying to clone DIV and it's inner elements. How can I change the names of all inner elements? Also I have function calls on the radio buttons. I need to change the name of the function also.Here is my HTML code. I appreciate any help. 

<div id="clonableDiv">
    <input id="radio_1" type="radio1" onclick="toggleNames1()" value="Yes" name="Yes">
    Yes
    <br>
    <input id="radio_2" type="radio1" onclick="toggleNames2()" value="No" name="No">
    No
    <div id="address">Address:</div>
    <div id="address1">
        <input id="address_1" class="textBox" type="text" maxlength="100" name="address_1">
    </div>
    <div id="country_select">
        Country:
        <select id="country_drop_1" name="country_drop_1" onchange="setCountry(this.selectedIndex)"> 
            <option value="-1"></option>
            <option value="USA">USA</option>
            <option value="Canada">Canada</option>
        </select>
    </div>
</div>

Upvotes: 1

Views: 3269

Answers (4)

samura
samura

Reputation: 4395

var cloneCounter = 1;
var c = $('#clonableDiv').clone();
$('input, select', c).each(function(){
  var newName = $(this).attr('name');
  newName += '_' + cloneCounter;
  $(this).attr('name', newName);
})
cloneCounter++;
$('body').append(c);

you can see a quick example I made here: http://jsfiddle.net/CQKpP/1/

Upvotes: 0

jfriend00
jfriend00

Reputation: 707298

Here's a way to clone that div, update all the IDs and names and then insert the clone into the body:

var cloneCntr = 1;
function makeClone() {
    // clone the div
    var clone = $("#clonableDiv").clone(false);
    // change all id values to a new unique value by adding "_cloneX" to the end
    // where X is a number that increases each time you make a clone
    $("*", clone).add(clone).each(function() {
        if (this.id) {
            this.id = this.id + "_clone" + cloneCntr;
        }
        if (this.name) {
            this.name = this.name + "_clone" + cloneCntr;
        }
    });
    ++cloneCntr;
    $(document.body).append(clone);                         

}

To update the onclick handlers, you can just assign new values to them with obj.onclick = fn;.

You can see it in action here: http://jsfiddle.net/jfriend00/r2RLw/.

Much of this fixup of the clone would not be needed if you didn't use ID values and only used class names, but if this is part of a form that is getting submitted so you need unique name values, then you will have to do this type of fixed after cloning.

Upvotes: 2

Spencer Ruport
Spencer Ruport

Reputation: 35117

Frankly this sounds like a huge headache that simply isn't worth it. Whenever I want to clone a large grouping of elements I stay away from using IDs and stick to using class identifiers. That way I can clone the entire collection of elements and uniquely identify them by their parent and following class hierarchy. For example:

<div class="obj_Template">
    <span class="obj_SomeSpanChild1">Access Me!</span
    <span class="obj_SomeSpanChild2"><div class="obj_CountryName">USA</div></span>
</div>

var second = $(".obj_Template").clone().removeClass("obj_Template").addClass("obj_SecondElement");
second.insertAfter($(".obj_Template));

Now you have two uniquely identifiable parent elements and you can use the same code to traverse them.

Upvotes: 1

mkoryak
mkoryak

Reputation: 57928

you can change the names in one of 2 ways:

  1. get the innerHtml of the div, and do a replace on it with a clever regex
  2. clone the div, iterate over its children and change their name attributes

both of these have their merits, but id suggest the 2nd in your case.

Upvotes: -2

Related Questions