[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** · 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/

[DOM] ajout de champ dynamiquement

JavaScript

Vue hybride

Discussions similaires

Partager

Partager