Ajout/Suppression dynamique d'éléments
Bonjour, j'essai de réaliser un code permettant à un utilisateur d'ajouter ou supprimer plusieurs éléments (Combobox ou Select). Pour ce faire, l'utilisateur cliquera sur le bouton "Ajouter" qui générera un combobox en-dessous des combobox déjà existant et cliquera sur le bouton "Retirer" pour retirer le combobox en question. (Les boutons ne sont visibles que sur la dernière ligne de combobox et donc ne permettent l'ajout ou la suppression du dernier combobox).
La majorité de mon code semble fonctionner (Création de combobox généré dynamiquement, supression des boutons précédents pour les recrée à côté du nouveau combobox) cependant, mon bouton "Retirer" ne fonctionne pas comme il se doit. Il supprime la ligne désirée correctement mais affiche les boutons Ajouter et Retirer une ligne en dessous, il laisse donc une ligne vide entre le "nouveau" dernier combobox et les boutons. De plus, lorsque je clique sur mon bouton Ajouter après cette manipulation, il crée le combobox à sa gauche, si je reclique, tout redevient normal. J'aimerais que les boutons se positionnent correctement à la droite du dernier combobox et crée le nouveau combox en dessous comme il se doit.
Voici mon code:
Javascript
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
|
<SCRIPT type="text/javascript">
compteur = 0;
function createCombo()
{
//Incrémentation du compteur
compteur++;
//Vérification de la valeur du compteur
if(compteur>0)
{
//Affectation de valeurs aux variables
//Ligne précédente
oldAddID = "ajout" + (compteur-1);
oldRemID = "retire" + (compteur-1);
//Ligne courrante
addID = "ajout" + compteur;
remID = "retire" + compteur;
selID = "select" + compteur;
}
//Le formulaire
var myForm = document.getElementById("formulaire");
//Boutons précédents
var myOldAdd = document.getElementById(oldAddID);
var myOldRem = document.getElementById(oldRemID);
//Combobox actuel
var mySelect = document.createElement("select");
var myOption = document.createElement("option");
var myOptionText = document.createTextNode("Valeur 1");
//Boutons
var myAdd = document.createElement("button");
var myRem = document.createElement("button");
//Identification du combobox
mySelect.id = selID;
//Création d'une valeur dans le combobox
myOption.appendChild(myOptionText);
myOption.setAttribute("value","none");
//Détails du bouton ajouter
myAdd.id = addID;
myAdd.appendChild(document.createTextNode('Ajouter'));
myAdd.onclick = createCombo;
//Détails du bouton retirer
myRem.id = remID;
myRem.appendChild(document.createTextNode('Retirer'));
myRem.onclick = retireCombo;
//Ajout d'un retour de chariot
var myBreak = document.createElement("br");
//Affectation des éléments à leurs conteneurs
mySelect.appendChild(myOption);
myForm.appendChild(mySelect);
myForm.appendChild(myAdd);
myForm.appendChild(myRem);
myForm.appendChild(myBreak);
myForm.removeChild(myOldAdd);
myForm.removeChild(myOldRem);
}
function retireCombo()
{
//Le formulaire
var myparam = document.getElementById("formulaire");
//Les éléments à supprimer
var oldAddRem = document.getElementById("ajout" + compteur);
var oldRemRem = document.getElementById("retire" + compteur);
var oldSelectRem = document.getElementById("select" + compteur);
//Les éléments à rajouter
var newAddRem = document.createElement("button");
var newRemRem = document.createElement("button");
//Détails du bouton ajouter
newAddRem.id = addID;
newAddRem.appendChild(document.createTextNode('Ajouter'));
newAddRem.onclick = createCombo;
//Détails du bouton retirer
newRemRem.id = remID;
newRemRem.appendChild(document.createTextNode('Retirer'));
newRemRem.onclick = retireCombo;
//La suppression
myparam.removeChild(oldAddRem);
myparam.removeChild(oldRemRem);
myparam.removeChild(oldSelectRem);
//L'ajout des éléments antérieurs
myparam.appendChild(newAddRem);
myparam.appendChild(newRemRem);
}
</SCRIPT> |
HTML:
Code:
1
2
3
4
5
6
7
8
9
|
<div id="paraID">
<form id="formulaire">
<select name="etape">
<option value="none">Valeur 1</option>
</select>
<INPUT TYPE="BUTTON" ONCLICK="createCombo()" id="ajout0" VALUE="Ajouter"><BR>
</form>
</div> |
Merci d'avance
