Formulaire dynamique en Javascript

**Endast** · 03/07/2014, 08h33

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** · 03/07/2014, 10h59

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** · 03/07/2014, 11h08

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** · 03/07/2014, 11h35

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** · 03/07/2014, 11h57

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** · 03/07/2014, 12h24

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.

**iakou** · 03/07/2014, 13h16

Nous ne sommes pas sur la même longueur d'ondes !

J'essaie de comprendre ce que votra application doit faire, et quelle est la logique de l'enchainement des actions...

- En création : Que créons-nous ?... et comment le créer ?...
- En modification : Que pouvons-nous modifier au contrat ?... et comment y arriver ?...
- En suppression : ...

C'est l'analyse du problème qui est intéressante, pas le code !... Le code sera d'autant plus simple que l'analyse aura été bien pensée.

Maintenant, je réalise bien que vous n'avez pas le temps de tout expliquer, mais je voulais simplement vous mettre en garde...

Cordialement

PS : Si vous dîtes que vos options sont liées, j'entrevois des tableaux dans votre application.... Non ?...

**kaari kosaku** · 03/07/2014, 13h58

Envoyé par iakou

Nous ne sommes pas sur la même longueur d'ondes !

J'essaie de comprendre ce que votra application doit faire, et quelle est la logique de l'enchainement des actions...

- En création : Que créons-nous ?... et comment le créer ?...
- En modification : Que pouvons-nous modifier au contrat ?... et comment y arriver ?...
- En suppression : ...

C'est l'analyse du problème qui est intéressante, pas le code !... Le code sera d'autant plus simple que l'analyse aura été bien pensée.

Maintenant, je réalise bien que vous n'avez pas le temps de tout expliquer, mais je voulais simplement vous mettre en garde...

Cordialement

Je rajouterais à cette annonce pleine de bon sens qu'il est plus simple de réaliser un projet lorsqu'on sait ce qu'il doit faire et comment il doit le faire.
Avant de commencer à travailler sur un projet important on passe des semaines, des mois, en conception et en réflexion sur comment on va l'aborder et quelles solutions on va utiliser pour réaliser ce qu'on souhaite créer.
Une fois qu'on sait comment on va le faire, on se met alors au travail, et on est rapide parce qu'on sait ce qu'on doit faire.
(enfin, tout ça dans un monde parfait hein !)

En bref, si tu ne sais pas comment faire quelque chose, trouve un moyen pour y arriver, on est là pour t'aider, en te donnant des pistes et en apportant nos expériences dans le domaine parce que sur toutes les personnes présentes ici, il y en a surement pleins qui se sont déjà posés les même questions que toi ou qui a voulu faire une chose similaire.

Si on résume le programme que tu souhaite faire, il consiste en plusieurs zone select,
Tu souhaite que lorsqu'advient une modification, l'option sélectionnée... <--- évènement
... survienne une manipulation de l'HTML <--- DOM

Après je rejoint Iakou, qu'est-ce que tu crée, qu'est-ce que tu change ? selon quelles conditions ? etc...

**iakou** · 03/07/2014, 22h15

Bonsoir.

Je vous ai "bricolé" une page HTML + JS qui fait le début de votre application.

Copiez cette page et sauvegardez-la avec l'extension ".html", vous pourrez "l'ouvrir avec" votre navigateur favori, la tester et l'adapter à vos besoins...

- Vous verrez : On demande d'abord l'action, et si création ou modification sont sélectionnés, la liste déroulante "raccordement" sera générée...
- Quand une action est sélectionnée, on demande une confirmation.
- Si c'est confirmé, la liste "action" sera "disabled" (bloquée pour la suite du traitement) .

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
<html>
<head></head>
<body style="font: 16px verdana;">
     <label>1 - Action : </label> 
     <select onchange="interception(this)">
          <option value="choix">Sélectionnez une action</option>
          <option value="create">création</option>
          <option value="update">modification</option>
          <option value="delete">supression</option>           
     </select>
     <br><br>
     <span style="visibility:hidden" id="label2">2 - Type de raccordement</span>
     <span id="raccordement"></span>
 
<script type="text/javascript">     
     function creation_raccordement(argument)
     {    
     if ( argument=="delete" ) { return ; }
     var label2 = document.getElementById("label2") ;
     label2.style.visibility = "visible" ;   
     adresse = document.getElementById('raccordement') ;
     table = ['TL', 'RD' , 'ZZ'] ;
     selection = document.createElement('select') ;
     for (I=0; I<table.length; I++)
          {
          selection.options[I] = new Option(table[I], 'value', true);
          }
     adresse.appendChild(selection) ;         
     }
 
     function interception(X)
     {          
     indice = X.selectedIndex ;
     if ( indice == 0 )
          alert ("vous devez sélectionner une action !")
     else
          {
          action = X.options[indice].value ;          
          if ( confirm ("You chose to \"" + action + "\", please confirm !..." ) )
               {
               X.disabled=true ;
               creation_raccordement(action) ;
               }
          }
     }
</script>         
</body>
</html>

Cela ne correspondra peut-être pas exactement à votre application, néanmoins il y des choses intéressantes sur la manipulation des objets en JS.

Cordialement.

**Endast** · 04/07/2014, 07h43

Bonnjour, et avant tout merci pour vos réponses.

Pour vous répondre, je suis conscient qu'il y a un manque d'analyses derrière tout ça, mais l'analyse vient quand on sait quelles technologies peut effectuer ce que l'on veut faire, et dans mon cas, je ne savais même pas déclarer une variable en javascript avant de commencer ce projet, j'ai du le commencer et ensuite "apprendre" le javascript... Alors effectivement j'aurais peut-être du commencer à apprendre avant, mais je suis pressé par le temps...

Ensuite, sachez que les champs, bien qu'ils aient des noms significatifs ne créent rien ou ne modifient rien, ce sont juste des valeurs qui ont vocation à remplir un fichier par la suite, mais ces valeurs déterminent l'apparition et/ou les choix possibles dans les champs suivants...

Puis pour terminer je te remercie pour ton code, il me sera utile pour les évènements (action disable notamment) mais pour la structure, je pense garder le mien, d'autant plus que j'ai trouvé les erreurs... C'est une erreur de débutant toute bête mais bon... je vous montre la "correction" :

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

J'ai désormais compris comment fonctionne cet addEventListener...

En tout cas encore merci pour le temps que vous m'avez accordé, je place le sujet désormais en résolu

**iakou** · 04/07/2014, 09h01

Bonjour.

Oui effectivement, si votre travail est déjà bien avancé, recommancer sa copie serait "tragique"...
Par ailleurs, comme il l'a été précédemment souligné, nous ne connaissons pas les contraintes spécifiques du projet...

Néanmoins, je me permets ces 2 remarques :

- La méthode proposée est entièrement JS, et par conséquent ultra-performante (tout s'exécutant en fraction de milliseconde côté client).
- Vos fonctions JS "trimballent" du code HTML en dur. Que faites-vous de ce code, une fois qu'il est retourné ???...

Cdlt.

PS : Autant pour moi !... Vous utilisez innerHTML...

**Endast** · 04/07/2014, 09h31

Juste je me permets encore une dernière question... ^^

Toutes ces valeurs sont elles récupérables (les valeurs des champs qu'elles soient déterminées en HTML ou en JS) en PHP par un $_POST classique? Elles devraient l'être vu qu'elles sont justement retournées en innerHTML, mais je préfère m'en assurer plutôt que d'arriver à la fin et voir ce que n'est pas possible...

**iakou** · 04/07/2014, 09h47

Oui, mais il faudra "baliser" vos select dans un :

Code :

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

1
2
3
<FORM method="POST" action="traitement.php">
 
</FORM>

**Endast** · 04/07/2014, 10h05

Ok merci beaucoup, j'espère que le sujet servira à d'autres également

Formulaire dynamique en Javascript

JavaScript

Discussions similaires

Partager

Partager