Formulaire DOM et insertion de champs

**UHU_stic** · 26/08/2010, 14h30

Je désire créer un formulaire qui possèderais autant de lignes que l'utilisateur le désire. Les champs serait au dessus les uns des autres et le contenu des div (pour le moment un input text, 2 images) est interractif.

J'ai en value des input text leur ID pour me faire une idée.
Pour le moment mes div s'ajoute après div1 seulement. Je souhaiterais que selon le bouton sur lequel je clique, que la div s'insère derrière. J'utilise un insertAfter() du framework jQuery mais je ne suis pas habitué à le manipuler. Si quelqu'un aurait un exemple d'utilisation je suis preneur

Merci d'avance

Code:

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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
 
<html>
	<head>
	<title>Formulaire de saisie</title>
 
	<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
	<script src="cufon-yui.js" type="text/javascript"></script>
	<script src="mafont_400.font.js" type="text/javascript"></script>
	<script type="text/javascript">
       Cufon.replace('p');
    </script>
	<link rel="stylesheet" type="text/css" href="style.css" />	
	</head>
 
	<body>
 
	<?php
		// SCRIPT DE RECUPERATION DE L'ACTIVITE ET CREATION DU TITRE 
 
		// On récupère l'ID de l'option sélectionnée dans selection.php
		$id = $_POST['activite'];
		if($id == 'SEL'){header('location: http://localhost/Formulaire/selection.php');}		
 
		// Connexion au serveur BDD
		$connexion = mysql_connect('localhost', 'root', '') OR die('Erreur de connexion au serveur de base de données');
 
		// Selection BDD
		mysql_select_db('tarification') OR die('Sélection de la base de données impossible');
 
		// Stockage du retour de requete dans $requete
		// La requête sélectionne dans la table Tactivites, l'enregistrement qui correspond à l'ID transmit
 
		$requete = mysql_query("SELECT libelle FROM `tactivites` WHERE Tactivites.code='$id'")OR die ("Erreur dans la requête SQL d'affichage du titre");
		mysql_close();
 
		// Traitement du résultat
		while($resultat = mysql_fetch_row($requete)){
			echo "<p class=titre>$resultat[0]</p>";
		}
	?>
 
	<script type="text/javascript"><!--
	         var compteur = 0;
 
 
			function refresh(){
 
				//création d'une fonction qui renumérote les div correctement
				// et récupère les valeurs déjà entrées
 
			};
 
			function ajouter_premier(){
				compteur ++;
				var i = compteur;
				// On récupère le formulaire
	            var conteneur = document.getElementById('form_index');
 
	        	// Création du div de la ligne
	            var undiv = document.createElement('div');
	            // Création du champ texte
	            var texte = document.createElement('input');
	            // Création des deux images Add et Del
	            var add = document.createElement('img');
	            var del = document.createElement('img');
 
	            texte.name = 'nom_texte';
	            texte.type = 'text';
	            add.src = "+.png";
	            add.id = i;
	            del.src = "X.png";
 
	        	undiv.id = ('div'+i);
	        	texte.value = undiv.id;
 
	        	// On ajoute sur le click du plus
	            add.onclick = function(){ajouter(i);} 
 
	           // On enlève sur le click de la croix
			   del.onclick = function supprimer(){
 
		               // Si le champs est le dernier  suppression impossible
					   if(compteur == 1){
							alert('Vous ne pouvez pas supprimer la totalité des champs du formulaire');
							return;	
						}  
					   // Sinon            
		               // Elément à enlever
		               lediv = this.parentNode;
		               // Elément auquel on enlève
		               lefieldset = lediv.parentNode;
		               // On enlève !
		               lefieldset.removeChild(lediv);
 
		               //Décrémentation du compteur lors de la suppression d'un champ
		               compteur--;
		               // Refection propre des numérotations et valeurs
		               refresh();
 
 
		            };
 
	           undiv.appendChild(texte);
	           undiv.appendChild(add);
	           undiv.appendChild(del);
 
	           conteneur.appendChild(undiv);
	  		};
 
 
 
			function ajouter(i){
	            // Incrémentation du compteur à la création d'un nouveau champ
	            compteur ++;
 
	            // On récupère le formulaire
	            var conteneur = document.getElementById('form_index');
	            /**
	            * Création des éléments dont on a besoin :
	            * Un div dans lequel on mettra notre champ texte et deux images
	            * qui nous serviront à enlever ensuite le div ou en ajouter.
	            *
	            * En utilisant un div ça sera plus facile car sinon
	            * on aurais du enlever le champ texte et les images séparément.
	            */
 
	            // Création du div de la ligne
	            var undiv = document.createElement('div');
	            // Création du champ texte
	            var texte = document.createElement('input');
	            // Création des deux images Add et Del
	            var add = document.createElement('img');
	            var del = document.createElement('img');
 
	            /*  Tentative de suppression des doublons en nommant les ID uniques */
	            if (!document.getElementById("div"+i)){                
	            	undiv.id = ('div'+i);
	            	texte.value = undiv.id;
	            }
	            else{
	            	undiv.id = ('div'+compteur);
	            	texte.value = undiv.id;
	            }
 
 
	            texte.name = 'nom_texte';
	            texte.type = 'text';
	            add.src = "+.png";
	            add.id = i;
	            del.src = "X.png";
 
	            // On ajoute sur le click du plus
	            add.onclick = function(){ajouter(i);} 
 
	            // On enlève sur le click de la croix
	            del.onclick = function supprimer(){
 
	               // Si le champs est le dernier  suppression impossible
				   if(compteur == 1){
						alert('Vous ne pouvez pas supprimer la totalité des champs du formulaire');
						return;	
					}  
				   // Sinon            
	               // Elément à enlever
	               lediv = this.parentNode;
	               // Elément auquel on enlève
	               lefieldset = lediv.parentNode;
	               // On enlève !
	               lefieldset.removeChild(lediv);
 
	               //Décrémentation du compteur lors de la suppression d'un champ
	               compteur--;
	               // Refection propre des numérotations et valeurs
	               refresh();
 
 
	            };
 
	            /**
	            * Ajout des éléments au div grace a appendChild
	            * qui ajoute à la fin.
	            * On pourrait aussi utiliser createTextNode pour ajouter du texte apres la croix
	            */
	            undiv.appendChild(texte);
	            undiv.appendChild(add);
	            undiv.appendChild(del);
 
 
 
	            // Ajout du div
	            conteneur.appendChild(undiv);
	            $(undiv).insertAfter($('#div'+i));
 
	            /* exemple
        			var x = "<div id='contenu"+indice+"'><p>ESSAI</p></div>";
        			$(x).insertAfter($('#div-'+indice));
	            */
 
	         };
	      --></script>
 
	<form action='mapage.php' method='post' enctype='multipart/form-data'>
		<fieldset id='form_index'><legend>Formulaire de saisie</legend>
			<script	type="text/javascript">
				ajouter_premier();
			</script>
		</fieldset>
	</form>
</body>
</html>

**SpaceFrog** · 26/08/2010, 14h36

http://api.jquery.com/insertAfter/

**UHU_stic** · 26/08/2010, 15h13

Merci pour le lien mais je l'avais déjà dans un de mes onglet
J'ai pas l'impression d'avoir fait de faute de synthaxe selon cet exemple et il continue de me les insérer n'importe comment. Sûrement un problème d'algo

**SpaceFrog** · 26/08/2010, 15h30

Code :

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

1
2
 conteneur.appendChild(undiv);
	            $(undiv).insertAfter($('#div'+i));

tu appendes deux fois le même undiv ???

autre chose...

Code :

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

   texte.name = 'nom_texte';

pas avant IE8 !!
name est en lecture seule sur les anciennes version de IE

**UHU_stic** · 26/08/2010, 16h14

Bien vu pour le double append, j'avais oublié de placer l'ancien en commentaire.
Pour le name je suis sous IE 8 et les futur utilisateur aussi mais je rectifie dans le doute.
J'ai vérifié que le insertAfter fonctionne et il insère bien le undiv mais toujours à la ligne 2

Je piétinne et donc je refais 15 fois les mêmes test c'est pas bon je crois

Formulaire DOM et insertion de champs

jQuery

Discussions similaires

Partager

Partager