Ajouter des champs dynamiquement

Version imprimable

05/04/2017, 23h29
MInfo25

Ajouter des champs dynamiquement

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

Code:

<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 !
06/04/2017, 00h14
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...
06/04/2017, 08h17
SpaceFrog

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

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

Code:

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:

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>

06/04/2017, 14h39
melka one

jour

bloc1 bloc2 et bloc3 et bloc4 ne sont pas inséré dans le document
06/04/2017, 16h26
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:

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);

:fleche: Vous pouvez testez ici : http://jsbin.com/savebanoja/edit?html,output
06/04/2017, 16h55
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

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:

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>

06/04/2017, 18h25
Beginner.

Citation:

Envoyé par MInfo25

Voici en dessous mon code qui fonction :

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

Citation:

Envoyé par 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 ?

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

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

Code:

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>

06/04/2017, 18h41
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 ?

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

Code:

<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:

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>

06/04/2017, 19h28
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()...)
06/04/2017, 20h33
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 ?
08/04/2017, 11h32
NoSmoking

Bonjour,
tu peux également regarder du coté de cette discussion : Insertion/Suppression d'une ligne d'une TABLE
20/04/2017, 15h37
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