Formulaire Dynamique et <option>

Version imprimable

25/06/2008, 11h46
Er3van

Formulaire Dynamique et <option>
Bonjour,

Le problème que je vais vous soumettre est à mon avis un classique, qqchose de simple, mais je n'ai pas vraiment le temps d'aller apprendre le JS puisque c'est à faire pour hier, comme toujours... :X

Donc j'espère que qqun acceptera de m'aider.

Voici mon problème :

Je dois faire un formulaire (en fait, je dois modifier un formulaire existant, mais passons...), et dans l'un des champs (<select>), lorsque l'on selectionne une option précise, cela aura pour effet de rajouter plusieurs options dans le champ suivant.

J'imagine donc que je vais devoir avoir qqchose comme ça :
Code:

1 2 3 4 5 <select name="monForm1"> <option value="1">Choix 1</option> <option value="2">Choix 3</option> <option value="3" onClick="maFonctionJS()">Choix 3</option> </select>
Mais du coup, à quoi va correspondre la-dite fonction ?

Etant donné qu'il n'y a pas d'acces en BDD j'ose croire que JS suffira amplement...

Merci d'avance à tous ceux qui s'attarderont sur mon cas ;)
25/06/2008, 11h56
E.Bzz

Bonjour,
tout d'abord un évènement (onclick) sur une option ne donnera rien sous IE : il faut gérer ça dans le tag <select> (onchange).

Ensuite, tu as un post à lire en tout premier lieu ;)

Enfin, il faudrait au moins que tu saches (et nous dise), ce que fonctionnellement tu dois ajouter dans le champ suivant, pour voir où l'info est dispo ...

A+
25/06/2008, 12h02
Er3van

Merci pour lien mais j'y suis déjà passé, mais à l'heure actuelle je ne suis pas capable d'interprété tout le code...

Et particulièrement faire le tri de ce dont j'ai besoin ou non...

Ce que je veux, c'est que lorsque l'option 1 est choisie dans le select 1, j'ai l'option 3 et 4 qui s'ajoute au select 2.

J'vais essayer de voir le code plus en détail, mais c'est pas gagné...

Citation:

Envoyé par Er3van

Ce que je veux, c'est que lorsque l'option 1 est choisie dans le select 1, j'ai l'option 3 et 4 qui s'ajoute au select 2.

Quelque chose comme ça (à appeler sur onchange du select, donc) ?
Code:

1 2 3 4 5 6 7 8 9 function TransfertListe(idOrigine, idDestination) { var objOrigine = document.getElementById(idOrigine); var objDestination = document.getElementById(idDestination); for (i=0; i<objOrigine.options.length; i++) if (objOrigine.options[i].value != objOrigine.options[objOrigine.options.selectedIndex].value) { ADeplacer = new Option(objOrigine.options[i].text, objOrigine.options[i].value); objDestination.options[objDestination.length]=ADeplacer; } }
A+

25/06/2008, 12h13
Er3van
Bon, le code de la Faq n'a décidément pas grand chose à voir avec ce que je souhaite, néanmoins, de ce que j'ai compris, je devrais avoir qqchose comme ça :
Code:

1 2 <select name="listeville" onChange='addToForm(this.value)'>
Code:

1 2 3 4 5 6 7 <script language="javascript"> function addToForm(value) { if ( value == 3 ) { .... } </script>
Mais il me manque toujours la partie "ajout dans le formulaire".

Le truc c'est que mon formulaire est généré par PHP, mais bon, le code généré est le suivant :
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 <tr> <td> <span class="formulaire">Projet : </span> </td> <td> <select name="projet" style="width:180px;"> <option value="null"></option> <option value="1">SIRH</option> <option value="2">Oriade</option> </select> </td> </tr> <tr bgcolor="#FFCCCC"> <td> <span class="formulaire">Environnement : </span> </td> <td> <select name="environnement[]" style="width:180px;" multiple> <option value="1">BDD Oracle 10g Linux</option><br/> <option value="2">Serveur Web</option><br/> <option value="3">OSX</option><br/> <option value="4">Apache</option><br/> </select> </td> </tr>
Et donc pour donner des noms ayant du sens, je souhaiterais que quand je selectionne SIRH, j'obtienne trois options supplémentaires dans le select "environnement".
L'une des options est par exemple

Code:

<option value="5">AppSIR</option>

Par rapport à ta fonction, je ne comprends pas vraiment tous les test effectués....

En adaptant, est-ce que j'aurais cela ?
Code:

1 2 3 4 5 6 7 8 function TransfertListe() { var objOrigine = "projet" ; var objDestination = "environnement" ; if ( objOrigine.options.selectedIndex.value == "1" ) { Ajouter = new Option("5", "AppSIR"); objDestination.options[objDestination.length]=Ajouter; } }

Citation:
Envoyé par Er3van
En adaptant, est-ce que j'aurais cela ?
Code:

1 2 3 4 5 6 7 8 function TransfertListe() { var objOrigine = "projet" ; var objDestination = "environnement" ; if ( objOrigine.options.selectedIndex.value == "1" ) { Ajouter = new Option("5", "AppSIR"); objDestination.options[objDestination.length]=Ajouter; } }
Non, pas du tout :aie:

La fonction est à prendre telle quelle.
Tu as juste à ajouter un id à tes select (identique au name, par ex. mais sans les [] ), et à passer ces id en paramètre à la fonction (sur le onchange du 1° select) ;)

A+

25/06/2008, 12h42
Er3van

Citation:

Envoyé par E.Bzz

Non, pas du tout :aie:

La fonction est à prendre telle quelle.
Tu as juste à ajouter un id à tes select (identique au name, par ex. mais sans les [] ), et à passer ces id en paramètre à la fonction (sur le onchange du 1° select) ;)

A+

Ok, mille merci ça marche !
En revanche, ça m'ajoute des options non souhaitées...
Comment je pourrais l'adapter (sans tout casser) pour que ça n'ajoute que des options de mon choix (non contenues dans le formulaire d'origine) et uniquement pour l'une des options ?

Mes divers essais jusqu'à maintenant furent infructueux :S
25/06/2008, 12h44
E.Bzz

Citation:

Envoyé par Er3van

Ce que je veux, c'est que lorsque l'option 1 est choisie dans le select 1, j'ai l'option 3 et 4 qui s'ajoute au select 2.

Faudrait savoir :roll:

Autant pour moi, l'option 3 et 4 ne font pas partie du select 1 ^^'
"Ce que je veux, c'est que lorsque l'option 1 est choisie dans le select 1, le select 2 reçoit deux options supplémentaires."
Mal exprimé, ma faute :oops:

J'ai modifié le code est ça n'agit plus que dans le cas où je selectionne "SIRH", en revanche, si je selectionne SIRH, puis autre chose, puis SIRH, ça me rajoute les options :S
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function AjouterAuxEnv(idOrigine, idDestination) { var objOrigine = document.getElementById(idOrigine); var objDestination = document.getElementById(idDestination); var uneFois = 1 ; if (objOrigine.options[objOrigine.options.selectedIndex].value == "1" && uneFois == 1 ) { newOption = new Option("AppSIR", "5"); objDestination.options[objDestination.length]=newOption; newOption = new Option("AppDEC", "6"); objDestination.options[objDestination.length]=newOption; uneFois = 2 ; } }
Et quelle serait la fonction pour supprimer les options dans le cas où je sélectionne un autre attribut ?

Encore merci ;)

Bon, j'ai fais plusieurs modifs et voici mon code :

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
 
<script type="text/javascript">
	var uneFois = 1 ;
	function AjouterAuxEnv(idOrigine, idDestination) {
		var objOrigine = document.getElementById(idOrigine);
		var objDestination = document.getElementById(idDestination);
		if (objOrigine.options[objOrigine.options.selectedIndex].value == "1" && uneFois == 1 ) {
			newOption = new Option("AppSIR");
			objDestination.options[4]=newOption;
			newOption = new Option("AppDEC");
			objDestination.options[5]=newOption;
			uneFois = 2 ;
		}
		else {
			EnleverAuxEnv(idOrigine, idDestination)
		}
	}
	function EnleverAuxEnv(idOrigine, idDestination) {
		var objOrigine = document.getElementById(idOrigine);
		var objDestination = document.getElementById(idDestination);
		for ( i=5 ; i>3 ; i-- ) {
			objDestination.options[i]=null ;
		}
		uneFois = 1 ;
	}
</script>

A priori tout fonctionne, mais comment puis-je vérifier que les "value" soient bonnes ? (puisque dans le code source ça n'appaitra pas...)

D'abord, je ne vois pas l'intérêt de ta variable 'uneFois' ni de la fonction EnleverAuxEnv

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
	function AjouterAuxEnv(idOrigine, idDestination) {
		var objOrigine = document.getElementById(idOrigine);
		var objDestination = document.getElementById(idDestination);
		if (objOrigine.options[objOrigine.options.selectedIndex].value == "1") {
			newOption = new Option("AppSIR");
			objDestination.options[4]=newOption;
			newOption = new Option("AppDEC");
			objDestination.options[5]=newOption;
		}
		else {
		        for ( i=5 ; i>3 ; i-- ) {
			      objDestination.options[i]=null ;
		        }
                }
	}
</script>

devrait fonctionner aussi bien.

Ensuite, qu'entends-tu par

Citation:

vérifier que les "value" soient bonnes ?

Ma variable "uneFois" fait qu'une selection de SIRH, puis encore de SIRH, ne rajoute pas 2*2 lignes.

Et finalement je suis passé par une base de données....

J'ai rusé un peu pour ne pas utiliser AJAX et ça marche :)

Mon code "pseudo-final en version béta comme FF3 :P" :

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
			<script type="text/javascript">
				var uneFois = 1 ;
				function AjouterAuxEnv(idOrigine, idDestination)
					{	var objOrigine = document.getElementById(idOrigine);
						var objDestination = document.getElementById(idDestination);
						if (objOrigine.options[objOrigine.options.selectedIndex].value == "1" && uneFois == 1 ) {
							for ( i=3 ; i<8 ; i++ ) {
							objDestination.options[i].style.display="block";
							}
							uneFois = 2 ;
						}
						else {
							EnleverAuxEnv(idOrigine, idDestination);
						}
					}
				function EnleverAuxEnv(idOrigine, idDestination)
					{	var objOrigine = document.getElementById(idOrigine);
						var objDestination = document.getElementById(idDestination);
						for ( i=7 ; i>3 ; i-- ) {
							objDestination.options[i].style.display="none";
						}
						uneFois = 1 ;
					}
			</script>

25/06/2008, 13h43
Bovino

Tant mieux si tu as pu résoudre ton problème, cependant, pour info :

Citation:

Ma variable "uneFois" fait qu'une selection de SIRH, puis encore de SIRH, ne rajoute pas 2*2 lignes.

Logiquement, cela ne doit pas pouvoir se produire car si l'option 1 est sélectionnée, que tu repasses par le select en rechoisissant l'option 1, il n'y a pas de change, donc pas de onchange et donc pas de doublon...

Plutôt que de récréer un topic je vais enchainer ici :

Je souhaiterai, avec une nouvelle fonction JavaScript, selectionner une option en fonction de la valeur de l'option sélectionnée dans un autre select.
Pour ça, je suis reparti de la fonction de tout à l'heure, seulement cette fois, rien ne se passe, et j'avoue avoir du mal à comprendre...
Code:

1 2 3 4 5 6 7 8 9 10 11 function SelectArchi(idOrigine, idDestination) { var objOrigine = document.getElementById(idOrigine); var objDestination = document.getElementById(idDestination); if (objOrigine.options[objOrigine.options.selectedIndex].text.test("64")==true ) { objDestination.selectedIndex=3; } else { objDestination.selectedIndex=2; } }
Code:

<select name="distribution" id="distribution" style="width:180px;" onchange="SelectArchi('distribution','architecture')"/>

Même si le test est faux, on devrait bien avoir l'index 2 de selectionné non ?