Jquery append or jQuery create element.html?

Question

I need to repeated large section (Account details section- Please see demo) when user click on add. What is the easy and best way to add/remove dynamically the whole section? Note. When user submits, I should be able to validate and capture the data so each field must be unique.

DEMO

HTML:

 <button type="button" id="AddCC" class="btn btn-warning form-control">Add Another Card</button>

Javascript:

$(document).ready(function() {

    $('#AddCC').bind('click', function() {
        alert("Add clicked");

    $("#CCPanel").clone().appendTo("#container");

   });

Actually Clone is working perfect. I just placed id in wrong div tag before. Now my question is how to make fileds unique for validating and submiting ? Please see updated demo.

Perhaps you should look clone() also in your case, and simply add class to cloned form to refernce the new input fields :) — Stefanos Vakirtzis
– Stefanos Vakirtzis, Commented Jan 21, 2014 at 19:24
Yes there ia clone() method but suggested not to use as it can create duplicate id's. In my case I need to hav ethose id's unique. — user3067524
– user3067524, Commented Jan 21, 2014 at 19:29

user3067524 · Accepted Answer · 2014-01-21 21:36:55Z

1

Please see my final demo. Problem solved. http://jsfiddle.net/tK4f6/12/

 $(document).ready(function() {

 var uniqueId = 1;
$('#AddCC').click( function() {

var copyDiv = $("#CCPanel").clone();
var divID =  'CCPanel' + uniqueId;      
copyDiv.attr('id',divID);

 $("#CCcontainer").append(copyDiv);

     $('#' + divID).find('input,select').each(function(){
        $(this).attr('id', $(this).attr('id') + uniqueId); 

     });
     uniqueId++;  

 });

answered Jan 21, 2014 at 21:36

user3067524

5274 gold badges10 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Stefanos Vakirtzis · Accepted Answer · 2014-01-21 21:15:07Z

0

EDIT : this should be working.

Ok here is an example :

The Html:

<form action="">
    input1 :<input  type="text">
    input2 :<input  type="text">
</form>

    <input type="button" id="add" value="Add">

The jquery:

$(document).ready(function() {
    $('#add').click(function() {
        var firstForm = $('form').first().clone();
        $('form').first().after(firstForm) ; 
    });
});

If you want to target an input in the cloned form simply :

$(THE FORMS PARENT).find('form').eq(0).find('input').eq(1).val(); //---> eq(0)=1st form eq(1)=2nd  form... same thing with inputs as well

And the FIDDLE.

edited Jan 21, 2014 at 21:15

answered Jan 21, 2014 at 20:34

Stefanos Vakirtzis

4481 gold badge7 silver badges19 bronze badges

9 Comments

user3067524 Over a year ago

Finally when i cliked on payNow button, am i submiting multiple forms to server ?can we submit more than 1 form to server ?

user3067524 Over a year ago

Seems I crashed filddler when i try to run your demo. It want to loop when cliked add multiple times.

Stefanos Vakirtzis Over a year ago

Edited my example excluding classes to make it simpler i am using the eq() method. My demo seems to run fine.Let me know if my example helped you at all.

user3067524 Over a year ago

I am not sure how your demo is working. When i click add button first time, it addes two elements, then adding 10 elements then again going more than 30 or 50 elements ...why it is multiplying ? Also asi mnetioned, I cannot add entire form. I just need to clone only the section. I would appreciate ifyou ca ntake a look at my demo and see how to make fields unique.

Stefanos Vakirtzis Over a year ago

At last sorry for my mistake, i have edited my answer above and updated my Fiddle.

|

Collectives™ on Stack Overflow

Jquery append or jQuery create element.html?

2 Answers 2

Comments

9 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

9 Comments

Related