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.