J'ai donc un formulaire ordinaire avec une suite de champs input et textarea que je dois pouvoir doubler ou tripler si l'utilisateur en a le besoin. Voici un aperçu :

Formulaire à répéter

Dans un premier temps, j'ai inclus cet ensemble de champs dans un <div>. J'ai ensuite téléchargé le fichier .js de JQuery (la version 1.2 vient de sortir).



J'ai inséré, juste avant la balise </div>, un lien qui permettra à l'utilisateur d'ajouter un "bloc" de champs. Je lui attribue la classe addMore.

<a href="javascript:;" title="Ajouter une nouvelle activit&eacute;" class="addMore" rel="Activit&eacute;">Ajouter une nouvelle activit&eacute; professionelle</a>

Enfin, dans l'entête de ma page, j'ai ajouté le code qui suit :

<script type="text/javascript"> 
$(document).ready(function () { 
 $("a@class='addMore'").click(function (){
       var plop = $(this).parents("div").children("fieldset:last");
       plop.after(plop.clone(true).hide());
       $(this).parents("div").children("fieldset:last").fadeIn("slow");
       $(this).parents("div").children("fieldset:last").children("legend")
.text($(this).attr("rel")+" n° "+$(this).parents("div").children("fieldset").size());

} ); } ); </script>



Une petite explication

Lorsque je clique sur un lien de classe "addMore", je récupère dans la variable "plop" (le nom est très parlant, vous ne trouvez pas ?) le dernier n½ud <fieldset> du div à qui appartient le lien.

Ensuite, je clone ce noeud (et son contenu) et je le place juste après lui. Puis je le cache (d'où la fonction hide()).

Enfin, je récupère le dernier noeud <fieldset> (celui que je viens d'ajouter, mais que j'ai caché) pour le développer avec un effet fadeIn. Cette étape n'est pas obligatoire. Vous pouvez directement montrer le nouveau fieldset à l'étape précédente, mais sans effet.

A ce noeud, je récupère le noeud fils <legend> pour lui attribuer un nouveau contenu. Cette étape est spécifique à mon cas, elle n'est pas non plus obligatoire.

Voilà, si je ne suis pas claire, que vous avez une remarque ou une question, n'hésitez pas dans les commentaires.