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.
