Jump to content

Jquery Clone


neilfurry
Go to solution Solved by kicken,

Recommended Posts

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.

Link to comment
Share on other sites

  • Solution

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>
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.