Clonage d'un formulaire dans jQuery et augmentation de l'index

Question

Cela semble relativement simple, je suis juste tombé sur la syntaxe jQuery.

Fondamentalement, je veux prendre cette forme:

<div class="me_signup"> 
    <input type="text" name="referral[0][name]" id="referral_0_name"> 
    <br> 
    <input type="text" name="referral[0][email]" id="referral_0_email"> 
</div> 

et en double avec un bouton et d'augmenter le nombre variable ..

$(".add_another_button").click(function(){ 
    ... 
}; 

Answer 1

Quelque chose comme this?

$(".add_another_button").click(function() { 
    var $newdiv = $(".me_signup:last").clone(true); 
    $newdiv.find('input').each(function() { 
     var $this = $(this); 
     $this.attr('id', $this.attr('id').replace(/_(\d+)_/, function($0, $1) { 
      return '_' + (+$1 + 1) + '_'; 
     })); 
     $this.attr('name', $this.attr('name').replace(/\[(\d+)\]/, function($0, $1) { 
      return '[' + (+$1 + 1) + ']'; 
     })); 
     $this.val(''); 
    }); 
    $newdiv.insertAfter('.me_signup:last'); 
}); 

Answer 2

Vous pouvez mettre tout ce que html dans une variable et utiliser la méthode .append() pour ajouter à un élément DOM particulier. Et, si vous clonez ceci, assurez-vous de changer "id" en "class", car id doit être unique sur chaque page. Some more about .append() in official documentation