changer et afficher une variable en fonction d'un select

Bonjour,
Je débute en javascript et en ce moment je m'échine à réaliser quelque chose d'important pour un projet. J'espère que vous pourrez m'aider.
1)l'idée :
- J'ai des variables PHP, je veux les récupérer dans une variable Javascript.
- J'ai un champ select, je veux qu'à chaque option choisie, la valeur javascript correspondante s'affiche.
2) Exemple:

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<?php $A= 45; $B= 57; ?> <select name=test > <option value="1">bob</option> <option value="2">jérôme</option> </select> <script language="javascript"> if(option select =1){var C= $A}; if (option select = 2) {var C=$B) document.write (C) </script>

---

3) Explication:
Le but est que si l'utilisateur choisi par exemple l'option bob (value='1'),
alors le script javascript affiche la var C avec la valeur de $A .


J'y ai passé des heures sans obtenir le moindre résultat c'est vraiment pénible, si vous avez un script compatible multi-navigateur, merci d'avance !!!


N.B (le script au dessus n'a aucune chance de fonctionner, je le sais, c'est juste pour expliquer :-)

le probleme qui se pose c est que js et php ne s execute pas au meme endroit !

js => navigateur client
php => serveur web

montre le code que tu as fais pour qu on puisse t aider.

Merci pour ta réponse, Siddh

J'ai effacé mon code, j'étais en colère. Mais effectivement j'ai mal posé le problème, je réexplique en reprenant les éléments de mon code dont je me souviens:
1)
Je récupère des nombres depuis la base à l'aide d'une requête PHP.
Cette requête initialise des variables javascript à l'aide d'un

Code:

---

1 2	echo" <script language="javascript">document.write=(var A= $requete[nombreA], var B=$requete[nombreB)</script>"

---

2)
J'ai donc le select

Code:

---

1 2 3 4 5

<select name=test > <option value="1">bob</option> <option value="2">jérôme</option> </select>

---

3) si l'option de value 1 est sélectionnée, le script javascript affiche la var A, si l'option 2 est sélectionnée, le script affiche la var B.


Voilà l'idée, je crois que je me suis mieux expliqué même si ça frôle le ridicule :roll:

Il faut que tu revoies ton point 1).

Initialise une Array JavaScript, avec chacune de tes valeurs, et tu n'aura que peu de problème pour les utiliser.

Regarde dans la FAQ ou dans les tutoriaux pour voir comment fonctionnent les Arrays.

Et une fois que tu maitrises les tableaux, on verra le point 3)...

Ok DenisC, je vais attaquer les arrays en javascript pendant une heure ou deux, et je reviens ensuite chercher du renfort pour éliminer le point 3
:)

Pour les points 1 et 2, pouvez vous me dire, si c'est correct et si oui, on file au point 3, merci

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13

<?php $R="SELECT nbrA,nbrB,nbrC,nbrD,nbrE,nbrF,nbrG,nbrH as bob FROM totaux"; $VR=mysql_query("$R"); while ($FR=mysql_fetch_array($VR)) { echo" script language="javascript" type="text/javascript"> association = new Array("$FR[nbrA]","$FR[nbrB]","$FR[nbrC]","$FR[nbrD]"); administration = new Array("$FR[nbrE]","$FR[nbrF]","$FR[nbrG]","$FR[nbrH]"); </script> ";)   ?>

---

>> Donc normalement, la requête ci-dessus initialise deux tableaux javascript (nombre de site :
association["5","48","47","95"]
administration["45","22","11","114"]

Je reprend mon select :

Code:

---

1 2 3 4 5 6

<select name=test > <option value="1">actualité</option> <option value="2">nouveauté</option> <option value="3">vacances</option> <option value="4">ventes</option> </select>

---

>> Le but est donc que si le visiteur choisie l'option actualité, le script javascript (le fameux point 3) affiche le nombres d'informations disponibles pour les sites associatifs (en renvoyant la case 1 du tableau association), ainsi que le nombre d'informations disponibles pour les sites administratifs (en renvoyant la case 1 du tableau administration).

Citation:

---

Envoyé par psychoBob

echo"
script language="javascript" type="text/javascript">
association = new Array("$FR[nbrA]","$FR[nbrB]","$FR[nbrC]","$FR[nbrD]");

---

A part un < manquant au début de ta balise script, ça me parait très bien pour les points 1) et 2).

Pour le point 3), je propose:

Code:

---

1 2	<select name="test" id="test" onchange="doTest(this)">...

---

Associé à:

Code:

---

1 2 3 4 5 6 7 8 9 10

function doTest(monSelect) { indice = monSelect.options[monSelect.selectedIndex].value; chaine =""; chaine += "sites associatifs : "; chaine += association[indice]; chaine += "\nsites administratifs : "; chaine += administration[indice]; alert(chaine); }

---

Alors, après, a toi de voir ou tu veux insérer tes informations (là, c'est juste un alert pour l'exemple).

Un fioriture: tu n'as pas vraiment besoin de tes values dans tes options si elles ne sont que l'indice de l'option, enfin, c'est un détail :)

Merci pour ton script denisC, c'est beaucoup mieux.

Je n'ai pas bien compris le fonctionnement de la fonction, il faudrait que je lise quelques tutoriaux sur ce thème (quelques commentaires dans la fonction serait aussi les bienvenus, accessoirement :wink: )

Par contre j'ai le problème suivant avec ce script :

En effectuant un choix, le select disparait et le phrase s'affiche à la place.
La présentation voulue serait celle ci (j'ai remplacé le "alert" par un
window.document.write(chaine) ) :

<champ select>
association: nombre à afficher en fonction du select
administration : nombre à afficher en fonction du select

Donc le select est toujours présent et en dessous on a aussi toujours les mots association et administration, seul le nombre change en fonction du select.


Voilà si vous pouvez m'aider à achever le problème ça m'enlèverait un gros sapin du pied. En attendant je vais essayer de comprendre la fonction de DenisC.

N.B: les values sont là pour renvoyer des id à la requêtes SQL, tout cela est dans un formulaire :D (mais inutile dans l'exemple il est vrai).

Lol en fait ça ne va pas, je viens de me rendre compte que le value du select est prédéfini pour permettre de générer la requête SQL.

Ou alors je prend le contenu du champ option comme valeur à transmettre à la requête, mais cela ne va t'il pas être empêché par le fait qu'une value est déjà défini ?

Citation:

---

Envoyé par psychoBob

Lol en fait ça ne va pas, je viens de me rendre compte que le value du select est prédéfini pour permettre de générer la requête SQL.

Ou alors je prend le contenu du champ option comme valeur à transmettre à la requête, mais cela ne va t'il pas être empêché par le fait qu'une value est déjà défini ?

---

Pas compris 8O

Sinon, pour mon code:

Code:

---

monSelect.selectedIndex

---

retourne l'indice de l'option selectionnée.

Code:

---

indice = monSelect.options[monSelect.selectedIndex].value;

---

retourne la valeur de l'option selectionnée.

Et pour le reste, c'est simplement des concaténations de chaine.
Sinon, pour afficher un message (et d'ailleur, en général) je te déconseille fortement le document.write.

Créé un div vide dans ta page:

Code:

---

1 2	<div id='message'></div>

---

Et affectes lui ton message:

Code:

---

1 2	document.getElementById('message').value=chaine;

---

C'est plus propre.... Pour tes autres problèmes, j'attends un peu plus d'explications de ta part, parceque j'ai du mal, là :wink:

Non en fait ça va, ce sont mes neurones qui commencent à coaguler :D
Après je réexplique l'ensemble de la manoeuvre.

Par contre je n'ai pas réussi à afficher le résultat avec ce que tu me dis là :

J'ai écrit cela sous le champ select </script>

Code:

---

1 2 3

<script language="javascript" type="text/javascript"> document.getElementById('message').value=chaine; </script>

---

et j'ai supprimé
alert(chaine) de la fonction.

Donc le code donne cela :

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

<script language="javascript" type="text/javascript"> function doTest(monSelect) { indice = monSelect.options[monSelect.selectedIndex].value; chaine =""; chaine += "sites associatifs : "; chaine += association[indice]; chaine += "\nsites administratifs : "; chaine += administration[indice]; } </script> </head>   <body>   <script language="javascript" type="text/javascript"> association = new Array("4","32","25","12"); administration = new Array("5","33","36","13"); </script>     <select name="test" id="test" onchange="doTest(this)"> <option value="0">actualité</option> <option value="1">nouveauté</option> <option value="2">vacances</option> <option value="3">ventes</option> </select>   <div id='message'> <script language="javascript" type="text/javascript"> document.getElementById('message').value=chaine; </script> </div>

---

Je résume l'objectif :
J'extrais à l'aide d'une requête SQL le solde du nombre de type de site (administration ou association) pour chaque catégorie. [j'ai tronqué cette partie pour simplifier]
En choisissant une catégorie (actualité, nouveauté...) le script javascript affiche pour chaque type de site le nombre de ceux-ci disponible pour la catégorie sélectionné.

Une fois que le visiteur sait combien de liens il va trouver pour chaque type de site pour la catégorie sélectionnée, il peut cocher la case type de site qui l'intéresse (en pratique il y a beaucoup plus de type de site et catégorie).
Le script php génère ensuite une requête qui va aller chercher dans la base les résultats correspondant au type de site ET à la catégorie sélectionnés.

Donc pour PHP mysql, c'est bon je m'y connais assez, mais c'est la première fois que je dois écrire un script javascript.

Ainsi donc, c'est très gentil de bien vouloir m'aider à finaliser ce script qui va surement mettre microsoft sur les genoux :oops: (après j'approfondie javascript, mais là c'est une semie urgence)

Citation:

---

Envoyé par psychoBob

Par contre je n'ai pas réussi à afficher le résultat avec ce que tu me dis là :

J'ai écrit cela sous le champ select </script>

Code:

---

1 2 3

<script language="javascript" type="text/javascript"> document.getElementById('message').value=chaine; </script>

---

et j'ai supprimé
alert(chaine) de la fonction.

---

Non, ma ligne de code (document....) tu dois la mettre dans la fonction, exactement à la place de l'alert().

Ca va bientot le faire :)

Bon alors j'ai essayé cela (j'ai juste enlevé la ligne de code de la balise div 'message' et je l'ai placée dans fonction à la place de Alert), mais ça ne fonctionne pas, il n'y a rien qui s'affiche en changeant l'option du select :(

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

<script language="javascript" type="text/javascript"> function doTest(monSelect) { indice = monSelect.options[monSelect.selectedIndex].value; chaine =""; chaine += "sites associatifs : "; chaine += association[indice]; chaine += "\nsites administratifs : "; chaine += administration[indice]; document.getElementById('message').value=chaine; } </script> </head>   <body>   <script language="javascript" type="text/javascript"> association = new Array("4","32","25","12"); administration = new Array("5","33","36","13"); </script>     <select name="test" id="test" onchange= "doTest(this)"> <option value="0">actualité</option> <option value="1">nouveauté</option> <option value="2">vacances</option> <option value="3">ventes</option> </select>   <div id='message'>   </div>

---

salut,
remplaces

Code:

---

document.getElementById('message').value=chaine

---

par

Code:

---

document.getElementById('message').appendChild(document.createTextNode(chaine));

---

et ca devrais aller.

Aussi, je ne voudrais compliquer mais il doit toujours y avoir afficher "administration" et "association" avec une checbox et
donc la fonction ne doit afficher que le chiffre pour chaque ligne...

Hein ? Si je veux des roulettes pour mon vélo ?
Nan je voudrais mon script c'est tout merci :D

po compris :?:

Merci siddh, on a posté ensemble !

Je viens d'essayer ton code, c'est mieux mais par contre si on choisi une option le résultat s'affiche (cool) mais si on choisi une nouvelle option, le résultat s'affiche à la suite du premier qui ne disparait pas (moins cool).

a ce moment la passe par innerHTML comme ca ca effacera tout plutot que de devoir enlever le noeud.

Code:

---

document.getElementById('message').innerHTML = chaine;

---

En fait la présentation est celle-ci (je nomme les éléments, imaginez-les SVP)

champ select

checkbox association
checbox administration

On choisissant une option du select, on obtiens par exemple l'affichage:
checkbox association : 14 sites
checbox administration : 26 sites

Alors ton code fonctionne, mais avant de me lancer dans son analyse afin de pouvoir m'en reservir, je voudrais bien que vous m'aidiez à obtenir exactement le bon résultat, comme j'ai essayé de l'expliquer avec le post du dessus.

Je réexplique : Dans le script que vous venez de m'aider à réaliser, les phrases "sites associatifs : 12 sites administratifs : 13" ne s'affiche qu'en sélectionnant une option.

Je voudrais que "sites associatif" et "sites administratif" soient toujours affiché, aux cotés d'une checkbox, et que seul le nombre (ici 12 ou 13) apparaisse et varie en fonction du select.

Après je décortique le tout, j'espère que vous pourrez m'aider à finir.