How to get current data while cloning using jquery

Question

How to get current data of elements while cloning using jquery. While cloning, it's copy's only the default data in the elements.

Here is the code

    souRce.clone()
    .prop('id', newName)    
    .html(function () {
        return $(this).html().replace(RegExp(PrevID, 'g'), newName); 
    })                                                  
    .appendTo(DestiNation);

It's not cloning a text box value which i changed after page load. Only default value, that was there on page load is cloning. — Jay, Oct 08 '15 at 10:03
What is `souRce`? You should provide sample replicating issue in question itself. — A. Wolff, Oct 08 '15 at 10:09
For Eg: In the 'souRce', a textbox's value is 'test' in the page load. I changed it to some other value. Then i cloned the 'souRce'. But the textbox in the cloned one (Destination) is having the value 'test'. Not the new value. — Jay, Oct 08 '15 at 10:10
The problem is you are overriding the `html` of the cloned element, what are you trying to do with the html... are you trying to change the id/name of elements — Arun P Johny, Oct 08 '15 at 10:11
@ajay That's not default behaviour... http://jsfiddle.net/6h8huw19/ Maybe your issue is regarding your regex — A. Wolff, Oct 08 '15 at 10:11
@Arun. You are right. But how can i replace the content of cloned one? — Jay, Oct 08 '15 at 10:13
@ajay Looks like XY problem. Ask question regarding your former issue instead of not working workaround you think would fix it — A. Wolff, Oct 08 '15 at 10:14

Arun P Johny · Accepted Answer · 2015-10-08T10:54:51.767

1

The problem is, instead of using the cloned element, you are changing its content with the raw html which will replace runtime content with original html markup

So instead of replacing the entire html, just update the id and name properties like

var counter = 1;

function clone() {
  var souRce = $('.item').eq(0),
    DestiNation = $('#ct'),
    PrevID = 'item-' + counter,
    newName = 'item-' + ++counter;

  var regex = RegExp(PrevID, 'g');
  souRce.clone()
    .prop('id', newName)
    .find('[id], [name]').each(function() {
      if (this.id) {
        this.id = this.id.replace(regex, newName);
      }
      if (this.name) {
        this.name = this.name.replace(regex, newName);
      }
    }).end()
    .appendTo(DestiNation);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ct">
  <div class="item" id="item-1">
    <input name="a" value="A" id="a-item-1" />
    <input name="b" value="B" id="b-item-1" />
    <input name="c-item-1" value="C" id="c-item-1" />
  </div>
</div>
<button onclick="clone()">Clone</button>

edited Oct 08 '15 at 10:54

answered Oct 08 '15 at 10:20

Arun P Johny

384,651
66
527
531

TypeError: this.name is undefined this.name = this.name.replace(regex, newName); – Jay Oct 08 '15 at 10:48
So elements dont have name only id and some have only name. no id? – Jay Oct 08 '15 at 10:49
how to add exception for this? – Jay Oct 08 '15 at 10:52
it's not happening with the select box. But working for textbox, textarea etc. For select box the value/selectedIndex remains the default one. What can be the reason? – Jay Oct 08 '15 at 11:54

How to get current data while cloning using jquery

1 Answers1