Discussion :

[Norin]

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 :

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

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

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