[DOM] ajout de champ dynamiquement

Version imprimable

Bonjour,
j'ai réalisé un formulaire en php qui me permet de récupérer des valeurs et les insérer dans une bdd.

cependant, pour certains champs de mon formulaire j'aimerai qu'il soit dynamique.
exemple: je dois saisir un 'nom de famille' cependant il peut y'avoir plusieurs 'nom de famille' .
de ce fait j'aimerai intéragir avec l'utilisateur et ajouter un champ 'nom de famille' au besoin.

d'autre part ma seconde problématique est du même genre mais concerne maintenant plusieurs champs. en fait, j'ai des champs se rapportant à des locuteurs (locuteur 1, locuteur 2, etc.)
et pour chaque locuteur j'ai des renseignements le concernant.(age, sexe, profession)
dans ce cas de figure j'aimerai avoir autant de champs que de locuteur et interagir donc avec la demande de l'utilisateur.

voilà un bout de mon formulaire :

form.php
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 <html xmlns="http://www.w3.org/1999/xhtml" lang="fr"> <head> <title>Header</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Language" content="fr" /> </head> <body vlink="#0033CC" onload="hide();"> <h2 align="center">Fiche signalétique</h2> <table align="center" width=100% height=55%> <tr> <td> <form method="post" action="../bdd/insert.php" name="formulaire" onSubmit="return (testChamps() && check());" enctype="multipart/form-data" accept-charset="UTF-8"> <table> <tr> <td>nom de famille</td> <td><input type="text" size="50" name="Nom" ></td> </tr> <tr> <td><b><i>Locuteur 1</i></b></td> <td bgcolor="#006699"></td> </tr> <tr> <td>Identifiant :</td> <td><input type="text" size="50" name="id_1" onKeyUp="javascript:couleur(this);"></td> </tr> <tr> <td>Age :</td> <td><input type="text" size="50" name="age_1" onKeyUp="javascript:couleur(this);" onblur="verifAge(this)"></td> </tr> <tr> <td>Sexe :</td> <td><input type="radio" name="sex_1" value="M" />Masculin <input type="radio" name="sex_1" value="F" />Féminin</td> </tr> <tr> <td>Niveau d'étude :</td> <td><input type="text" size="50" name="etude_1" onKeyUp="javascript:couleur(this);"></td> </tr> </table> </form> </table> </body> </html>
merci de votre aide

09/06/2009, 12h35
andry.aime

Salut,
Tu peux voir dans la Faq:
http://javascript.developpez.com/faq...DOM#DOMajouter

Citation:

Envoyé par andry.aime

Salut,
Tu peux voir dans la Faq:
http://javascript.developpez.com/faq...DOM#DOMajouter

merci pour le tuyau

je ne suis pas vraiment expert en javascript et DOM donc j'aimerai un petit coup de main

voici un miniformulaire

form.xhtml

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
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test ajout dynamique</title>
 
<script type="text/javascript" src="test.js"> </script>
 
</head>
<body>
 
<FORM action="post">
 
<table>
	<tr>
		<td>nom: <input type="text" size="50" value="nom" /></td>
	</tr>
 
 
</table>
<input type="submit" value="Ajouter" onClick="javascript:add()" /></FORM>
 
 
</body>
</html>

et mon code en js

test.js

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
function add()
{
 
// recherche du noeud parent
var divParent = document.getElementById('divParent');
 
// création des nouveaux noeuds
var nouveauDiv = document.createElement('div');
var nouveauLabel = document.createElement('label');
var nouveauInput = document.createElement('input');
 
// paramétrage des nouveaux noeuds
nouveauLabel.appendChild(document.createTextNode("Mon nouveau label :"));
nouveauLabel.htmlFor = 'nouveauId';
 
nouveauInput.name = 'nouveau';
nouveauInput.id = 'nouveauId';
nouveauInput.type = 'text';
 
// raccord des noeuds
divParent.appendChild(nouveauDiv);
nouveauDiv.appendChild(nouveauLabel);
nouveauDiv.appendChild(nouveauInput);
 
}

ça ne produit rien pour le moment bien entendu.

j'aimerai qu'en appuyant sur le bouton ajouter j'ai un nouveau champ "nom"

merci de votre aide

1 - L'élément divParent n'existe pas.
2 - N'utilise pas submit pour l'ajouter mais un button.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test ajout dynamique</title>
<script type="text/javascript" src="test.js"> </script>
</head>
<body>
<FORM action="post">
<table>
	<tr>
		<td>nom: <input type="text" size="50" value="nom" /></td>
	</tr>
</table>
<div id='divParent'></div>
<input type="button" value="Ajouter" onclick="add()" /></FORM>
</body>
</html>

voici mes corrections :
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 function add() { // recherche du noeud parent var divParent = document.getElementById('name'); // création des nouveaux noeuds var nouveauDiv = document.createElement('name'); var nouveauLabel = document.createElement('label'); var nouveauInput = document.createElement('input'); // paramétrage des nouveaux noeuds nouveauLabel.appendChild(document.createTextNode("nom :")); nouveauLabel.htmlFor = 'nouveauId'; nouveauInput.name = 'nouveau'; nouveauInput.id = 'nouveauId'; nouveauInput.type = 'text'; // raccord des noeuds divParent.appendChild(nouveauDiv); nouveauDiv.appendChild(nouveauLabel); nouveauDiv.appendChild(nouveauInput); }
cela fonctionne j'ai bien des nouveau éléments name qui s'ajoute quand je clic.
une autre question , l'élément créé sera aura pour value name.
or il faudrait que j'ai un name1, name2, name3 ,etc..
j'ai pensé implémenté une boucle mais dans ce cas de figure je n'arrive pas trop à le concevoir.
j'aimerai aussi pouvoir supprimer les champs au cas où l'utilisateur ce serait trompé.

merci

09/06/2009, 15h51
andry.aime

Citation:

var nouveauDiv = document.createElement('name');

Code:

var nouveauDiv = document.createElement('div');

Créer une variable globale ou un hidden que tu incrémentes sa valeur à chaque ajout et le concaténer avec l'id ou le name de l'élément créé.

après un peu de travail voilà un résultat.

mon formulaire permet d'ajouter un nom quand je le souhaite ainsi qu'un groupe de champs représentant un locuteur à chaque fois.

form.xhtml

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
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>test ajout dynamique</title>
<script type="text/javascript" src="test.js"> </script>
</head>
<body>
<FORM id="form" action="post">
 
<div id='name'>
<table>
	<tr>
		<td>nom: <input type="text" size="50" value="name" /></td>
	</tr>
</table>
</div>
<input type="button" value="Ajouter" onclick="add()" />
 <br />
 
 
 
<div id="loc">
<table>
 
<tr><td>Identifiant : <input value="id" type="text" /></td></tr>
 
<tr><td>Age : <input value="age" type="text" /></td></tr>
 
    <tr><td>Sexe :
	<select size="1">
		<option value="">Votre choix</option>
		<option value="M">Masculin</option>
 
		<option value="F">Féminin</option>
 
	</select></td></tr>
 
	<tr><td>Niveau d'études : <input value="" type="text" /></td></tr>
 
 
</table>
<input value="Ajouter un élément" id="idBouton" type="button" onclick="addLigne();" />
</div>
 
    <br />
 
</FORM>
 
 
 
 
</body>
</html>

test.js

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
//add name
function add()
{
 
// recherche du noeud parent
var divParent = document.getElementById('name');
 
// création des nouveaux noeuds
var nouveauDiv = document.createElement('table');
var nouveauLabel = document.createElement('label');
var nouveauInput = document.createElement('input');
 
// paramétrage des nouveaux noeuds
nouveauLabel.appendChild(document.createTextNode("nom :"));
nouveauLabel.htmlFor = 'nouveauId';
 
nouveauInput.name = 'name';
nouveauInput.id = 'nouveauId';
nouveauInput.type = 'text';
 
// raccord des noeuds
divParent.appendChild(nouveauDiv);
nouveauDiv.appendChild(nouveauLabel);
nouveauDiv.appendChild(nouveauInput);
 
}
 
//add locuteur
 
function addLigne()
{
  var i;
  var elForm = document.getElementById("loc");
  var objBouton = document.getElementById("idBouton");
 
  /*** Creation des 2 input de type texte ***/
  var elInput = new Array();
  for (i=0;i<3;i++)
  {
     elInput[i] = document.createElement("input");
     elInput[i].type = "text";
  }
 
  /*** Creation des 4 textNode ***/
  var elTxt = new Array();
  var tabTxt = new Array("Identifiant : ","Age : ","Sexe : ","Niveau d'études : ");
 
  for (i=0; i<tabTxt.length; i++)
  {
     elTxt[i] = document.createTextNode(tabTxt[i]);
  }
 
  /*** Creation de la liste et de ses options ***/
  var elSelect = document.createElement("select");
  elSelect.size = "1";
 
  /*** Creation des options ***/
  /*** syntaxe : Option("Text","Value",selected,false); ***/
  var elOption = new Array(
                          new Option("Votre choix","",false,false),
                          new Option("Masculin","M",false,false),
                          new Option("Féminin","F",false,false)
                          );
 
  /*** Ajout d une ligne de separation ***/
	  var ligne = document.createElement("hr");
	  ligne.style.width = "75%";
	  ligne.style.color = "#A1B2C3";
	  elForm.insertBefore(ligne, objBouton);
 
  /*** Insertion du 1er texte et du 1er input dans le document ***/
  elForm.insertBefore(elTxt[0], objBouton);
  elForm.insertBefore(elInput[0], objBouton);
  /*** Insertion du 2eme texte et du 2eme input dans le document ***/
  elForm.insertBefore(elTxt[1], objBouton);
  elForm.insertBefore(elInput[1], objBouton);
 
  /*** Ajout du 3eme textNode pour la liste ***/
  elForm.insertBefore(elTxt[2], objBouton);
 
  /*** Insertion du select dans le document ***/
  /*** Attention IE : il faut inserer le select dans le document avant d ajouter
  **** les options ***/
 
  elForm.insertBefore(elSelect, objBouton);
  for (i=0;i<elOption.length;i++)
  {
     elSelect.options.add(elOption[i]);
  }
 
  /*** Insertion du 4eme texte et du 3eme input dans le document ***/
  elForm.insertBefore(elTxt[3], objBouton);
  elForm.insertBefore(elInput[2], objBouton);
 
 
 
 
  /*** Ajout de sauts de lignes ***/
 
  elForm.insertBefore(document.createElement("br"), objBouton);
  elForm.insertBefore(document.createElement("br"), objBouton);
}

dans le javascript j'ai deux fonctions :
add (qui ajoute un seul champs)
addligne (qui ajoute un groupe de ligne)

j'ai encore le problème de l'identifiant pour chaque champ créer.

je ne sais pas trop comment créer cette variable globale ou ce hidden dans mon script.
merci de votre aide

Salut,

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var nb=0;
function add()
{
 
var divParent = document.getElementById('name');
var nouveauDiv = document.createElement('table');
var nouveauLabel = document.createElement('label');
var nouveauInput = document.createElement('input');
 
nouveauLabel.appendChild(document.createTextNode("nom :"));
nouveauLabel.htmlFor = 'nouveauId';
 
nouveauInput.name = 'name'+nb;
nouveauInput.id = 'nouveauId'+nb;
nouveauInput.type = 'text';
 
// raccord des noeuds
divParent.appendChild(nouveauDiv);
nouveauDiv.appendChild(nouveauLabel);
nouveauDiv.appendChild(nouveauInput);
 nb++;
}

10/06/2009, 15h25
knebhi

merci je vais appliquer cela à ma seconde fonction et tester avec ma bdd.

ajout de champ dynamiquement

Je reformule mon soucis...

j'ai créé un formulaire dont une partie ressemble à ceci :

form.php

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
<tbody id="loc">
			<tr>
				<td align="center"><b><i>Informations sur les locuteurs</i></b></td>
				<td bgcolor="#006699"></td>
			</tr>
			<tr>
				<td><b><i>Locuteur 1</i></b></td>
				<td bgcolor="#006699"></td>
 
			</tr>
			<tr>
				<td>Identifiant :</td>
				<td><input type="text" size="50" name="id_1" onKeyUp="javascript:couleur(this);"></td>
 
			</tr>
			<tr>
				<td>Age :</td>
				<td><input type="text" size="50" name="age_1" onKeyUp="javascript:couleur(this);" onblur="verifAge(this)"></td>
 
			</tr>
			<tr>
				<td>Sexe :</td>
				<td><input type="radio" name="sex_1" value="M" />Masculin <input
					type="radio" name="sex_1" value="F" />Féminin</td>
 
			</tr>
			<tr>
				<td>Niveau d'étude :</td>
				<td><input type="text" size="50" name="etude_1" onKeyUp="javascript:couleur(this);"></td>
 
			</tr>
 
 
 
			<tr><td><input value="Ajouter un locuteur" id="idBouton" type="button" onclick="addLigne();" /></td></tr>
 
		</tbody>

l'idée est de pouvoir ajouter un nouveau locuteur dynamiquement lorsque cela est nécessaire.

j'ai donc réalisé un code javascript qui est celui ci :

test.js

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
69
70
71
72
73
74
75
76
function addLigne()
{
  var i;
  var elForm = document.getElementById("loc");
  var objBouton = document.getElementById("idBouton");
 
  /*** Creation des 3 input de type texte ***/
  var elInput = new Array();
  for (i=0;i<3;i++)
  {
     elInput[i] = document.createElement("input");
     elInput[i].type = "text";
  }
 
  /*** Creation des 4 textNode ***/
  var elTxt = new Array();
  var tabTxt = new Array("Identifiant : ","Age : ","Sexe : ","Niveau d'études : ");
 
  for (i=0; i<tabTxt.length; i++)
  {
	 elTxt[i] = document.createTextNode(tabTxt[i]);
  }
 
  /*** Creation de la liste et de ses options ***/
  var elSelect = document.createElement("select");
  elSelect.size = "1";
 
  /*** Creation des options ***/
  /*** syntaxe : Option("Text","Value",selected,false); ***/
  var elOption = new Array(
                          new Option("Votre choix","",false,false),
                          new Option("Masculin","M",false,false),
                          new Option("Féminin","F",false,false)
                          );
 
  /*** Ajout d une ligne de separation ***/
	  var ligne = document.createElement("hr");
	  ligne.style.width = "75%";
	  ligne.style.color = "#A1B2C3";
	  elForm.insertBefore(ligne, objBouton);
 
  /*** Insertion du 1er texte et du 1er input dans le document ***/
  elForm.insertBefore(elTxt[0], objBouton);
  elForm.insertBefore(elInput[0], objBouton);
  /*** Insertion du 2eme texte et du 2eme input dans le document ***/
  elForm.insertBefore(elTxt[1], objBouton);
  elForm.insertBefore(elInput[1], objBouton);
 
  /*** Ajout du 3eme textNode pour la liste ***/
  elForm.insertBefore(elTxt[2], objBouton);
 
  /*** Insertion du select dans le document ***/
  /*** Attention IE : il faut inserer le select dans le document avant d ajouter
  **** les options ***/
 
  elForm.insertBefore(elSelect, objBouton);
  for (i=0;i<elOption.length;i++)
  {
     elSelect.options.add(elOption[i]);
  }
 
  /*** Insertion du 4eme texte et du 3eme input dans le document ***/
  elForm.insertBefore(elTxt[3], objBouton);
  elForm.insertBefore(elInput[2], objBouton);
 
 
 
 
  /*** Ajout de sauts de lignes ***/
 
  elForm.insertBefore(document.createElement("br"), objBouton);
  elForm.insertBefore(document.createElement("br"), objBouton);
 
 
 
}

lorsque je clique sur le bouton "ajouter un locuteur" rien ne se passe.
le formulaire se présente sous forme de tableau et l'ajout de locuteur ne prend pas en compte cela (car je ne savais pas comment faire.)

je m'attendai à un résultat même mauvais mais rien ne se passe.

merci de votre aide

23/06/2009, 11h51
SpaceFrog

http://www.developpez.net/forums/d76...pprimer-champ/
23/06/2009, 12h24
knebhi

en fait mon code fonctionne bien je l'ai testé sur un formulaire simple sans mise en forme (tableau etc..)
cependant lorsque je n'arrive pas à l'adapter au formulaire que j'ai mis en place.

je ne suis pas un expert javascript voilà donc pourquoi je vous demande un éclaircissement.
23/06/2009, 12h27
E.Bzz

Ton code permet d'ajouter les champs.
Mais étant ici dans une table, il faut que tu crées les nouvelles lignes et cellules pour les accueillir.

Voir la FAQ sur ce sujet ...

A+
23/06/2009, 12h33
knebhi

Citation:

Envoyé par E.Bzz

Ton code permet d'ajouter les champs.
Mais étant ici dans une table, il faut que tu crées les nouvelles lignes et cellules pour les accueillir.

Voir la FAQ sur ce sujet ...

A+

merci pour le lien je vais appliquer cela à mon code.

je reviens à vous d'ici peu j'espère
23/06/2009, 12h48
SpaceFrog

Code:

nouveauInput.name = 'name';

selon microsoft ...

Citation:

"name cannot be set at runtime "

voilà donc la réponse à mon soucis comme indiquait un post précédent il faut ajouter des cellules au tableau de la manière suivante :

test.js

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
 
var num = 1;
function AddRow(){
	num++;
    var newRow = document.getElementById('loc').insertRow(-1);
    var newCell = newRow.insertCell(0);
   newCell.innerHTML = '<b><i>'+'Locuteur'+num+'</i></b>';
   newCell = newRow.insertCell(1);
   newCell.innerHTML = '';
 
   var newRow1 = document.getElementById('loc').insertRow(-1);
   var newCell1 = newRow1.insertCell(0);
  newCell1.innerHTML = 'Identifiant : ';
  newCell1 = newRow1.insertCell(1);
  newCell1.innerHTML = '<input type="text" size="50" name="id_1" onKeyUp="javascript:couleur(this);">';
 
  var newRow2 = document.getElementById('loc').insertRow(-1);
  var newCell2 = newRow2.insertCell(0);
 newCell2.innerHTML = 'Age : ';
 newCell2 = newRow2.insertCell(1);
 newCell2.innerHTML = '<input type="text" size="50" name="age_1" onKeyUp="javascript:couleur(this);" onblur="verifAge(this)">';
 
 var newRow3 = document.getElementById('loc').insertRow(-1);
 var newCell3 = newRow3.insertCell(0);
newCell3.innerHTML = 'Sexe : ';
newCell3 = newRow3.insertCell(1);
newCell3.innerHTML = '<input type="radio" name="sex_1" value="M" />Masculin <input type="radio" name="sex_1" value="F" />Féminin';
}

merci beaucoup de votre aide

23/06/2009, 16h51
E.Bzz

Heu ... pour le tableau, OK, mais par contre, dans un <form>, ça ça risque de poser problème sous IE

Code:

newCell1.innerHTML = '<input type="text" size="50" name="id_1" onKeyUp="javascript:couleur(this);">';

A+