Jquery Clone

[neilfurry]

Hi Mate,

 

I need help on using the jquery clone method.

 

i have this html script that i clone

 

<div class="col-md-2 col-sm-3 col-lg-1 nopadding">

<input id="length" class="form-control input-sm nopadding" type="text" onchange="compute('floor','length','width','sqft');" placeholder="Length" maxlength="4" name="length">

</div>

 

Then when i cloned, it outputs this with id appending an incremented number at the end of the original id. example (length to length1) which is correct.

 

<div class="col-md-2 col-sm-3 col-lg-1 nopadding">

<input id="length1" class="form-control input-sm nopadding" type="text" onchange="compute('floor','length','width','sqft');" placeholder="Length" maxlength="4" name="length">

</div>

 

Now how can i pass the same ids to the onchange event so it should output compute('floor1','length1','width1','sqft1'). at the moment it did not pass the incremented id to the method.

 

here is my javascript:

 

function addrow(){

    var template = $('#rowsec').clone();
        rCount++;
        var attendee = template.clone().find(':input').val(0).each(function(){
                var newId = this.id.substring(0, this.id.length) + rCount;
                this.id = newId;
            
             }).end()
             .attr('id', 'rowsec' + rCount)
             .appendTo('#rows');
              
}
 

Thank you in advance.

[kicken]

A better way to approach this problem is to avoid the use of the ID's and onchange attribute entirely. You can do this by listening to the change event on the parent rows container, and when it occurs finding the elements you need in the dom of the appropriate row.

 

This is assuming the fields used in the change event are also duplicated in each row. I'm assuming that due to their incrementing IDs also. Take this fiddle as an example:

 

/**
 * Create a clone of the row template and add it to the #rows container.
 */
function cloneRow(){
    //Clone the entire row
    var $clone = $('#rowsec').clone();

    //Clear the input values.  Customize this if needed
    $clone.find('input').val(0);

    //Remove the ID so there's only one in the dom.
    $clone.removeAttr('id');

    //Add it to the rows container
    $('#rows').append($clone);
}

/**
 * Handle a change event.  Within the function `this` refers to the input that changed
 * We can use jQuery to find the other inputs based on the changed input
 * then run the calculations.
 */
function compute(){
    var $row = $(this).closest('.row');
    var $floor = $row.find('[name=floor]');
    var $length = $row.find('[name=length]');
    var $width = $row.find('[name=width]');
    var $sqft = $row.find('[name=sqft]');

    //Do your calculations
    $sqft.val($length.val() * $width.val());
}

//Clone row when button is clicked
$('#clone').click(cloneRow);

//Handle change events in each row
$('#rows').on('change', 'input', compute);

<button id="clone">
Clone Row
</button>
<div id="rows">
  <div class="row" id="rowsec">
    <div class="col-md-2 col-sm-3 col-lg-1 nopadding">
      <input class="form-control input-sm nopadding" type="text" placeholder="Floor" maxlength="4" name="floor">
    </div>
    <div class="col-md-2 col-sm-3 col-lg-1 nopadding">
      <input class="form-control input-sm nopadding" type="text" placeholder="Length" maxlength="4" name="length">
    </div>
    <div class="col-md-2 col-sm-3 col-lg-1 nopadding">
      <input class="form-control input-sm nopadding" type="text" placeholder="Width" maxlength="4" name="width">
    </div>
    <div class="col-md-2 col-sm-3 col-lg-1 nopadding">
      <input class="form-control input-sm nopadding" type="text" placeholder="Sqft" maxlength="4" name="sqft">
    </div>
  </div>
</div>

[neilfurry]

You're the best mate... Thank you so much :-)