[DOM] ajout de champ dynamiquement

**knebhi** · 09/06/2009, 12h12

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 :

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

**andry.aime** · 09/06/2009, 12h35

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

**knebhi** · 09/06/2009, 14h42

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 :

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

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

**andry.aime** · 09/06/2009, 15h11

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

Code HTML :

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

**knebhi** · 09/06/2009, 15h39

voici mes corrections :

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

**andry.aime** · 09/06/2009, 15h51

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

Code :

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

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éé.

**knebhi** · 10/06/2009, 14h47

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 :

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

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

**andry.aime** · 10/06/2009, 14h55

Salut,

Code JAVASCRIPT :

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
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++;
}

**knebhi** · 10/06/2009, 15h25

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

**knebhi** · 23/06/2009, 11h46

Je reformule mon soucis...

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

form.php

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

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

**SpaceFrog** · 23/06/2009, 11h51

http://www.developpez.net/forums/d76...pprimer-champ/

**knebhi** · 23/06/2009, 12h24

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.

**E.Bzz** · 23/06/2009, 12h27

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+

**knebhi** · 23/06/2009, 12h33

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

**SpaceFrog** · 23/06/2009, 12h48

Code :

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

nouveauInput.name = 'name';

selon microsoft ...

"name cannot be set at runtime "

**knebhi** · 23/06/2009, 16h41

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 :

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

**E.Bzz** · 23/06/2009, 16h51

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

Code :

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

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

A+

[DOM] ajout de champ dynamiquement

JavaScript

Discussions similaires

Partager

Partager