Discussion :

[MInfo25]

Bonjour
J'ai un formulaire dans lequel j'ai un élément button comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<button>+ Ajouter une expérience</button>

J'aimerais que quand je clique sur ce bouton, j'ai 3 champs textes et un champ d'une liste déroulante qui apparaissent. Je voudrai pouvoir recliquer sur ce bouton et afficher encore d'autres même champs à remplir. Comment puis-je le faire ? Aidez-moi !

[Beginner.]

Salut,

On peut le faire d'une façon qui est critiquée je crois a savoir en utilisant la propriété innerHTML, on crée par exemple une div, on lui ajoute le code html qu'on veut via la propriété innerHTML puis on a ajoute cette div au document.

Sinon on utilise les méthode de manipulation du DOM mais je trouve que ça peut être long des fois...

[SpaceFrog]

Un vieux souvenir:
https://www.developpez.net/forums/d5...ynamique-form/

[MInfo25]

J'ai trouvé ce script qui permet juste d'ajouter un seul champ texte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<form name="formulaireDynamique">
   <input type="button" onclick="ajout(this);" value="ajouter un champ"/>
   <br /><br />
   <input type="submit" value="soumettre"/>
</form>
 
<script type="text/Javascript" >
   function ajout(element){
      var formulaire = window.document.formulaireDynamique;
      // On clone le bouton d'ajout
      var ajout = element.cloneNode(true);
      // Crée un nouvel élément de type "input"
      var champ = document.createElement("input");
      // Les valeurs encodée dans le formulaire seront stockées dans un tableau
      champ.name = "champs[]";
      champ.type = "text";
 
      var sup = document.createElement("input");
      sup.value = "supprimer un champ";
      sup.type = "button";
      // Ajout de l'événement onclick
      sup.onclick = function onclick(event)
         {suppression(this);};
 
      // On crée un nouvel élément de type "p" et on insère le champ l'intérieur.
      var bloc = document.createElement("p");
      bloc.appendChild(champ);
      formulaire.insertBefore(ajout, element);
      formulaire.insertBefore(sup, element);
      formulaire.insertBefore(bloc, element);
   }
 
function suppression(element){
   var formulaire = window.document.formulaireDynamique;
 
   // Supprime le bouton d'ajout
   formulaire.removeChild(element.previousSibling);
   // Supprime le champ
   formulaire.removeChild(element.nextSibling);
   // Supprime le bouton de suppression
   formulaire.removeChild(element);
}
</script>

J'ai modifié ce code pour pouvoir ajouter 3 champs texte et une liste déroulante mais ça ne marche pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<form name="formulaireDynamique">
   <input type="button" onclick="ajout(this);" value="ajouter un champ"/>
   <br /><br />
   <input type="submit" value="soumettre"/>
</form>
 
<script type="text/Javascript" >
   function ajout(element){
      var formulaire = window.document.formulaireDynamique;
      // On clone le bouton d'ajout
      var ajout = element.cloneNode(true);
      // Crée 4 nouvels élément de type "input"
      var champ1 = document.createElement("input");
	  var champ2 = document.createElement("input");
	  var champ3 = document.createElement("input");
	  var champ4 = document.createElement("select");
      // Les valeurs encodée dans le formulaire seront stockées dans un tableau
      champ1.name = "champs1[]";
      champ1.type = "text";
 
	  champ2.name = "champs2[]";
      champ2.type = "text";
 
	  champ3.name = "champs3[]";
      champ3.type = "text";
 
	  champ4.name = "champs4[]";
      champ4.type = "text";
 
      var sup = document.createElement("input");
      sup.value = "x";
      sup.type = "button";
      // Ajout de l'événement onclick
      sup.onclick = function onclick(event)
         {suppression(this);};
 
      // On crée un nouvel élément de type "p" et on insère le champ l'intérieur.
      var bloc1 = document.createElement("p");
	  var bloc2 = document.createElement("p");
	  var bloc3 = document.createElement("p");
	  var bloc4 = document.createElement("p");
      bloc1.appendChild(champ1);
	  bloc2.appendChild(champ2);
	  bloc3.appendChild(champ3);
	  bloc4.appendChild(champ4);
      formulaire.insertBefore(ajout, element);
      formulaire.insertBefore(sup, element);
      formulaire.insertBefore(bloc, element);
   }
 
   function suppression(element){
   var formulaire = window.document.formulaireDynamique;
 
   // Supprime le bouton d'ajout
   formulaire.removeChild(element.previousSibling);
   // Supprime le champ
   formulaire.removeChild(element.nextSibling);
   // Supprime le bouton de suppression
   formulaire.removeChild(element);
}
</script>

[melka one]

jour

bloc1 bloc2 et bloc3 et bloc4 ne sont pas inséré dans le document

[Beginner.]

Oui melka one a raison, à la ligne 48 vous insérez "bloc" qui n'existe pas au lieu d’insérer bloc1, bloc2,bloc3 et bloc4...

Remplacez cette ligne 48 par :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
      formulaire.insertBefore(bloc1, element);
      formulaire.insertBefore(bloc2, element);
      formulaire.insertBefore(bloc3, element);
      formulaire.insertBefore(bloc4, element);

Mais il y a d'autres problèmes, la fonction "suppression" ne fonctionne pas car elle était particulière à l'exemple d'où vous l'avez prise...Vous avez maintenant quatre champs il faut donc quatre fois l'instruction : formulaire.removeChild(element.nextSibling);

Vous pouvez testez ici : http://jsbin.com/savebanoja/edit?html,output

[Beginner.]

Je l'ai fait de la façon dont j'ai parlée et qui est critiquée je crois à savoir en utilisant la propriété innerHTML...

J'ai donc ajouté une ligne, vous prouvez tester ici : http://jsbin.com/qawiyipita/edit?html,console,output

PS : On peut faire tout le reste de cette manière mais si cela ne vous convient pas il faudra utiliser les mêmes méthodes que celles que vous avez utilisées (createElement(), appendChild()...)

[Beginner.]

J'ai fait le reste de cette manière : http://jsbin.com/weloxulobe/1/edit?html,output

PS : C'est quoi fondamentalement le problème avec cette méthode dans ce genre de situation ?

[NoSmoking]

Bonjour,
tu peux également regarder du coté de cette discussion : Insertion/Suppression d'une ligne d'une TABLE

[MInfo25]

Bonjour
Désolée de repondre tardivement, je n'étais pas partie. J'ai pu adopter la dernière solution qui marchait à savoir celle de Beginner.
Le problème que je rencontre maintenant est comment afficher le rendu en javascript dans un de mes fieldset html ?

J'ai crée une nouvelle discussion, je ferme celle-ci ! Merci à tous de votre aide