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

[melka one]

le plus simple serait de créer un conteneur dans lequel on met les éléments et j'ai du mal a comprendre l’intérêt de mettre les input et le select dans une balise p

[MInfo25]

Ca marche en suivant toutes vos indications. Ma question maintenant est de savoir comment construire et mèttre des données dans ma liste déroulante ?

Voici en dessous mon code qui fonction :

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
62
63
64
65
66
67
68
<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(bloc1, element);
      formulaire.insertBefore(bloc2, element);
      formulaire.insertBefore(bloc3, element);
      formulaire.insertBefore(bloc4, 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);
   formulaire.removeChild(element.nextSibling);
   formulaire.removeChild(element.nextSibling);
   formulaire.removeChild(element.nextSibling);
   // Supprime le bouton de suppression
   formulaire.removeChild(element);
}
</script>

[Beginner.]

Voici en dessous mon code qui fonction :

Oui on peut aussi voir et même tester le code dans lien que j'ai donné...

Ca marche en suivant toutes vos indications. Ma question maintenant est de savoir comment construire et mèttre des données dans ma liste déroulante ?

Après ou pendant l'insertion dynamique ? Et quelle liste déroulante puisqu'il peut y en avoir plusieurs ?

[MInfo25]

Oui pendant l'insertion dynamique, j'aimerais que cette liste déroulante s'ajoute :

Code :

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

1
2
3
4
5
6
7
8
9
<select>
<option value="" selected="selected">Principal enseignement...</option>
<option value="connaissance_metier">Connaissance du métier</option>
<option value="interet_metier">Intérêt pour le métier</option>
<option value="connaissance_secteur">Connaissance du secteur</option>
<option value="interet_secteur">Intérêt pour le secteur</option>
<option value="management">Management</option>
<option value="rigueur">Rigueur</option>
</select>

[Beginner.]

Ok mais à quelle liste déroulante puisqu'il peut y en avoir plusieurs ?

Vous voulez ces options pour chaque liste insérée ?

A la fin ça risque d'être long on en revient alors à la méthode dont je parlais au début...

PS : c'est quoi l’intérêt de faire plusieurs insertions les unes à la suite des autres ?

[MInfo25]

En fait j'ai un long formulaire, à un moment donné je dois ajouter des expériences en cliquant sur le bouton

Code :

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

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

. Et après clique sur ce bouton 3 champs textes et une liste déroulante doivent apparaître en dessous du bouton. Dans la liste déroulante, les utilisateurs doivent pouvoir sélectionner une valeur. Et cette liste est celle en dessous :

Code :

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

1
2
3
4
5
6
7
8
9
<select>
<option value="" selected="selected">Principal enseignement...</option>
<option value="connaissance_metier">Connaissance du métier</option>
<option value="interet_metier">Intérêt pour le métier</option>
<option value="connaissance_secteur">Connaissance du secteur</option>
<option value="interet_secteur">Intérêt pour le secteur</option>
<option value="management">Management</option>
<option value="rigueur">Rigueur</option>
</select>

[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