Discussion :

[Endast]

Bonjour à tous,

Pour l'objet de mon stage, je dois réaliser un formulaire évoluant dynamiquement de manière à ce que si le premier champ correspond à telles valeurs, le second en dessous proposent telles valeurs etc... Quand un champ est prédéterminé par un seul champ, pas de soucis. Le problème est quand il est déterminé par plusieurs champs, cela fait des heures que je cherche l'erreur dans le code, et je ne trouve pas, donc je désespère réellement. Aussi je suis novice en Javascript, à vrai dire j'ai commencé hier :

Le html d'abord :

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
18
19
<label for="ordre">Ordre :</label><br />
<select id="ordre">
	<option selected>Sélectionnez l'ordre</option>
	<option value="CREATION">CREATION</option>
	<option value="MODIF">MODIF</option>
	<option value="RESIL">RESIL</option>
</select><br/ ><br />
<label for="typerac">Type de raccordement :</label><br />
<select id="typerac" hidden></select><br/ ><br />
<label for="typedegroup">Type de dégroupage :</label><br />
<select id="typedegroup" hidden></select><br/ ><br />
<label for="techno">Technologie :</label><br />
<select id="techno">
	<option selected>Sélectionnez la technologie</option>
	<option value="DSL1">DSL1</option>
	<option value="DSL2">DSL2</option>
	<option value="RAD1">RAD1</option>
	<option value="FO">FO</option>
	<option value="BPE">BPE</option>

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
var ordre = document.getElementById('ordre'),
    techno = document.getElementById('techno'),
    typedegroup = document.getElementById('typedegroup');
ordre.addEventListener('change', function() {
	typerac.hidden = !(typerac.innerHTML =      details(ordre.options[ordre.selectedIndex].text));	
}, true);
function details(ordre){
	if (ordre == 'CREATION'){
		return '<option>Sélectionnez le type de raccordement</option>' + 
			'<option value="TL"> TL </option>' +
			'<option value="RD"> RD </option>' ; 
	}
}
ordre.addEventListener('change', function() {
	typedegroup.hidden = !(typedegroup.innerHTML = details2(ordre.options[ordre.selectedIndex].value));
}, true);
function details2(ordre){
	if (ordre == 'CREATION'){
		return '<option>Sélectionnez le type de dégroupage</option>' + 
			'<option value="PARTAGE"> PARTAGE </option>' +
			'<option value="TOTAL"> TOTAL </option>' +
			'<option value="RADIO"> RADIO </option>';
	}
}
techno.addEventListener('change', function() {
	statut.hidden = !(statut.innerHTML = details3(ordre.options[ordre.selectedIndex].value,techno.options[techno.selectedIndex].value);
}, true);
function details3(ordre,techno){
	if(ordre == 'CREATION' && techno == 'DSL1) {
		return '<option>Sélectionnez le statut de raccordement</option>' + 
			'<option> A </option>';
	}
	else if(ordre == 'CREATION' && techno == 'DSL2') {
		return '<option>Sélectionnez le statut de raccordement</option>' + 
			'<option> A </option>' +
			'<option> I </option>' +
			'<option> R </option>' +
			'<option> C </option>';
	}
	else if(ordre == 'CREATION' && techno == 'RAD1') {
		return '<option>Sélectionnez le statut de raccordement</option>' + 
			'<option> R </option>' +
			'<option> I </option>' +
			'<option> A </option>';
	}
}

La fonction posant problème est details3 avec les instructions la précédant, c'est à dire l'affectation à statut.hidden, car le reste fonctionne si on commente toute cette partie. Je tiens à préciser que je préfère travailler avec des values et non des text car tout ceci à vocation à être traiter avec du PHP par la suite. Voilà si vous pouviez m'aider à chercher l'erreur, ça serait très sympa.

Merci d'avance.

[iakou]

Bonjour.

Pourquoi ne pas renseigner directement "en dur" vos options dans votre page HTML ?... (car vous pouvez gérer l'attribut hidden en javascript)

Ainsi suivant les actions vous affichez ou non, les listes déroulantes....

Attention toutefois IE gère l'attibut hidden différemment !... Si vous suiviez cette piste, vous devrez alors utilisez un peu de CSS.

Cdlt

[Endast]

Déjà, merci de ta réponse

Ensuite, je ne peux pas renseigner en "dur" car les options du champ ne doivent pas simplement être cachés, mais doivent aussi varier en fonction d'un champ précédemment rempli. Ces champs eux mêmes sont parfois prédéterminé par là, du code HTML en dur, ça c'est déjà un problème car je n'arrive pas à récupérer une valeur choisie par l'utilisateur mais écrite dans le JS.

Aussi, je n'arrive pas non plus à déterminer une nouvelle liste déroulante lorsque celle-ci doit prendre en compte les choix de l'utilisateur dans deux listes déroulantes avant ça, un peu comme j'essaie de faire dans la fonction JS details3.

[kaari kosaku]

Dans ce genre de cas on utilise la manipulation du DOM, qui te permet de pointer les balises de ta page grâce à un objet JS.
Tu as alors pleins d'outils à ta disposition pour manipuler ton DOM, te déplacer entre les noeuds, ajouter de nouveaux attributs etc...

Dans ton cas, ce que je ferais, c'est créer un objet javascript qui contiennent tous les éléments de ton formulaire, et d'ajouter les méthodes dont tu as besoin pour le modifier.

[iakou]

Pour en revenir à la logique de l'application (sans parler pour l'instant de code) : Pourquoi votre page HTML affiche d'entrée les 4 listes, alors que vous dîtes qu'il y a un enchainement des actions ?... Ne devez-vous pas affichez vos listes déroulantes, au fur et à mesure des choix de l'utilisateur ?...

- En création, on demande d'abord le raccordement, en fonction de ce dernier (TL ou RD si j'ai bien suivi), on affiche ensuite le dégroupage qui convient, et ainsi de suite... Non ?...
A la limite vous pourriez même afficher toutes les options, si l'utilisateur en choisissait une qui n'est pas possible, vous signaleriez alors une erreur... Ma suggestion initiale prend ici tout sons sens...

- En modification, on affiche uniquement les listes qui sont modifiables (Ex: il n'est peut-être plus possible de changer le raccordement)...

- En suppression, je ne sais pas...

[Endast]

Ok Merci kosaku, je verrais le DOM si tu m'affirmes que cela peut être une méthode, j'avoue que je ne sais même pas ce que c'est, mais je chercherais

Aussi je précise que je viens de me rendre compte qu'il manquait une partie du code HTML, ce qui me fait au total 5 listes :

Code manquant :

Code :

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

1
2
3
4
5
6
 
 
</select><br/ ><br />
 
		<label for="statut">Statut de raccordement :</label><br />
			<select id="statut" hidden></select><br/ ><br />

Puis iakou, effectivement les 5 listes sont à la suite, la première (ordre) et la quatrième (technoà sont visibles mais les autres sont invisibles, et le deviennent que si il y a un choix précis de l'utilisateur aux listes obligatoires. Ce que je n'arrive pas à faire, c'est récupérer les choix des listes obligatoires pour pouvoir en faire des conditions pour les autres listes. Une seule c'est ok (qu'elle soit écrit en JS ou en HTML par ailleurs, j'ai réussi à résoudre ce soucis, il faut simplement appliquer la même méthode que quand la valeur est écrite en HTML), mais quand vient le moment de passer plusieurs paramètres dans une fonction comme j'essaie de le faire dans la fonction details3 , cela devient compliqué alors que pourtant... c'est une définition de fonction classique.

Je pense que je vais commencer par m'intéresser à cette partie du code :

Code :

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

1
2
3
4
5
 
 
techno.addEventListener('change', function() {
	statut.hidden = !(statut.innerHTML = details3(ordre.options[ordre.selectedIndex].value,techno.options[techno.selectedIndex].value);
}, true);

D'après mes tests, c'est ici que ça plante, ou dans les conditions de la fonction si elle est mal écrite, mais honnêtement je ne vois pas l'erreur.

Pour la suggestion initiale, effectivement ça pourrait être une idée, mais mon tuteur m'a orienté dans cette voie d'abord, déjà parce qu'il me reste du temps pour réaliser ceci, aussi parce que ça simplifie grandement la tâche pour l'utilisateur. Votre suggestion me servira en derniers recours, je la comprends maintenant.

Pour ce qui est du déroulement du programme, le choix CREATION est le plus important, il active d'autres champs, ou du moins ceux que j'ai mis dans le code.