Formulaire DOM et insertion de champs
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.
http://img7.hostingpics.net/pics/687736test.jpg
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 :D Merci d'avance
Code:
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
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> |
