Formulaire dynamique en Javascript
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 :aie: :
Le html d'abord :
Code:
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:
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.
