Le clonage d'un formulaire dans jQuery et l'augmentation de l'indice
Question
Cela semble relativement simple, je suis juste perplexe sur la syntaxe jQuery.
En fait, 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(){
...
};
La solution
Quelque chose comme ce ?
$(".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');
});
Autres conseils
Vous pouvez mettre tout ce que html dans une méthode variable et .append () d'utiliser pour l'ajouter à un élément DOM particulier. Et, si vous cloner ce, assurez-vous de changer « id » à « classe », car id doit être unique sur chaque page. Certains plus sur .append () dans la documentation officielle
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow