CODEWITHSUNDEEP
javascriptjqueryclone
vinnie667
vinnie667

Reputation: 109

Clone and change classname +1 and name of fields

I am trying to figure out how to clone this div so that the cloned version has product 2 as its class name as well as the input nams to have rate2 and notes2. 

<div class="product1">   
    <input id="rate1" name="rate1" type="number">
    <input name="notes" type="text">
<div>

Trying to append in here **** 

<div class="sixteen columns" id="addproduct">
   <label><i class="fa fa-plus-square"></i> Add another product</label>
</div>

=================================================================================

I have a rough idea of how to clone it but thats as far as my knowledge goes. I have looked at other posts and can't see an easy way of doing it.

JQuery- 

$(document).ready(function(){
        $("#addproduct").click(function(){
            $(".product1").clone().appendTo("body");
        });
});

Thanks for any help!

Upvotes: 2

Views: 2611

Answers (3)

guest271314
guest271314

Reputation: 1

Edit, updated (v3)

Try

html (added 1 to end of attribute name , i.e., substitute notes1 for notes)

<input name="notes1" type="text" />

js (v3)

$(document).ready(function () {    
    $("#addproduct").on("click", function () {
        var clone = $("[class^=product]:last")
        .clone(false, false)[0].outerHTML.replace(/(\d)/g, function(a) {
          return parseInt(a) + 1
        });       
        $(clone).appendTo("body");
        // console.log($(clone).attr("class"));
    });
});

jsfiddle http://jsfiddle.net/guest271314/z2nxe84e/

Upvotes: 1

pstoev
pstoev

Reputation: 116

Why don't you try to keep a counter for sake of simplicity and increment it every time you add a new row (product). Something like this:

$(document).ready(function(){

    // the counter:
    var productID = 1;

    // the click handler:
    $("#addproduct").click(function() {

        // clone last added product:
        var nextProduct = $(".product" + productID).clone();

        // add corresponding classes (remove old first):
        nextProduct
          .removeClass('product' + productID)
          .addClass('product' + (++productID));

        // update id and name to the first input:
        nextProduct.find('input').eq(0).attr({
            id: 'rate' + productID,
            name: 'rate' + productID
        });

        // update name of the second input
        nextProduct.find('input').eq(1).attr('name', 'notes' + productID);

        // append to the body:
        $('body').append(nextProduct);
    });
});

This should do the job, although I'd recommend adding some identifiers to the two inputs (e.g. different class names, so you would avoid using the .eq() expression.

Live demo: http://jsbin.com/puluf/1/edit

Hope this helps!

Upvotes: 3

Bla...
Bla...

Reputation: 7288

Well I suggest you to use product-1 ,product-2 and so on as your ID and maybe product as your class name. By doing so, you can come up with something like this:

$("#addproduct").click(function(){
    var temp = $(".product").last().prop('id').split("-");
    $(".product").last().clone().appendTo("body");
    var result = parseInt(temp[1]) + 1;
    //assume this last product is the one that already added
    $(".product").last().prop("id", "product-"+result); 

});

Another way:

$("#addproduct").click(function(){
    var temp = $(".product").last().prop('id').split("-");
    var result = parseInt(temp[1]) + 1;
    var html = $(".product:nth-child(1)").html();
    $(".product").last().after('<div id="product-'+result+'" class="product">'+html+'</div>');
});

Upvotes: 2

Related Questions