CODEWITHSUNDEEP
javascriptjqueryclone
Wizard
Wizard

Reputation: 11295

Loosing input values when cloning jQuery

When I try clone table row where is input with value, it copy but input loose value. How to clone table row with value.

Example online

    <table class="table table-bordered table-striped">
      <tr>
        <th>Service</th>
        <th>Price</th>
        <th>Quantity</th>
        <th>&nbsp;</th>
      </tr>

  <tr class="tr_clone">
    <td><input type="text" ></td>
    <td><span class="controls">
      <input value="100000" class="placeholder span2 datepicker" type="text" value="" data-date-format="yyyy-mm-dd">
      </span></td>
    <td><span class="controls">
      <input class="placeholder span2 datepicker" type="text" value="" data-date-format="yyyy-mm-dd">
      </span></td>
    <td>&nbsp;</td>
  </tr>
</table>
<p><a href="#" class="tr_clone_add">Clone</a></p>

$(function(){
$(".tr_clone_add").live('click', function() {
    var $tr    = $('table').find('.tr_clone').first();
    var $clone = $tr.clone();
    $clone.find(':text').val('');
    $tr.after($clone);
});
});

Upvotes: 0

Views: 88

Answers (2)

techfoobar
techfoobar

Reputation: 66693

Do a deep copy by specifying the argument to clone() as true. This will clone the element with the data and any event bindings intact.

var $clone = $tr.clone(true);

And of course, remove the line where you are resetting all text inputs to ''

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

You need to remove $clone.find(':text').val('');.use:

$(function(){
 $(".tr_clone_add").live('click', function() {
var $tr    = $('table').find('.tr_clone').first();
var $clone = $tr.clone();
$tr.after($clone);
});
});

Working Fiddle

Upvotes: 0

Related Questions