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.

J'ai peut être une solution là, mais je ne sais pas ce quel vaut

je place une div initale :
<div id='message'>
<input typ="checkbox"> administration<br>
<input typ="checkbox">association
</div>

Dans la fonction j'écris :
indice = monSelect.options[monSelect.selectedIndex].value;
chaine ="";
chaine += "<input typ="checkbox"> association<br> ";
chaine += association[indice];
chaine += "<input typ="checkbox"> administration<br> ";
chaine += administration[indice];
document.getElementById('message').innerHTML = chaine;

Vous en pensez quoi ?

Code:

---

1 2	<input ..... />Sites associatifs : <span id="spanasso"></span><br /> <input ..... />Sites administratifs : <span id="spanadmin"></span><br />

---

Code:

---

1 2 3 4

function doTest(monSelect) { indice = monSelect.options[monSelect.selectedIndex].value; document.getElementById('spanasso').innerHTML = association[indice]; document.getElementById('spanadmin').innerHTML = administration[indice]; }

---

Merci beaucoup !

Mon idée pour l'affichage fonctionne, mais je vais essayer la tienne Siddh.

Je vais peut-être revenir pour me faire expliquer deux trois choses mais en tout cas je vous remercie déjà pour votre aide :D !

de rien, penses a :resolu: quand c est ok ;)

C'est noté.

Je laisse le post ouvert jusqu'à ce soir, le temps de potasser la chose :wink:

Merci encore

Après avoir reçu un poisson, ça serait super que je sache comment pécher :wink:

Je reprend donc la fonction et pose des questions sous chaque ligne.
Chaque question commence par //

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

function doTest(monSelect) // doTest est le nom de la fonction, à quoi sert monSelect ? { indice = monSelect.options[monSelect.selectedIndex].value; //pareil, à quoi sert monSelect (j'aurais pensé que c'est le nom du champ select, mais non)? // Quelqu'un pourrait-il m'aider à traduire la phrase indice=... en français ? chaine =""; // on initialise une variable pour débuter la phrase ? chaine += "<input type=\"checkbox\"> association "; // on met un + à la variable pour y ajouter ce qui suit le = ? chaine += association[indice]; chaine += "<br>"; chaine += "<input type=\"checkbox\"> administration "; chaine += administration[indice]; document.getElementById('message').innerHTML = chaine; //document.getElementById('message'), c'est une fonction intégrée de javacript? elle s'utilise pour quoi en générale? // innerHTML c'est quoi? une fonction intégrée? qui sert à quoi ?     <select name="test" id="test" onchange= "doTest(this)"> // A quoi sert id="test" ? // A quoi sert le (this) de doTest ? doTest indique la fonction mais pourquoi (this) ?

---

Merci d'avance pour vos explications qui font grimper mon QI à toute vitesse :wink:

Citation:

---

Envoyé par psychoBob

Après avoir reçu un poisson, ça serait super que je sache comment pécher :wink:

---

Un jour, petit scarabé, tu seras aussi fort que le maitre :king:

Citation:

---

Envoyé par psychoBob

function doTest(monSelect)
// doTest est le nom de la fonction, à quoi sert monSelect ?

>> monSelect est un élement HTML, qu'on a passé en argument à la fonction lors de son appel
{
indice = monSelect.options[monSelect.selectedIndex].value;
//pareil, à quoi sert monSelect (j'aurais pensé que c'est le nom du champ select, mais non)?
>> ce n'est pas le nom, c'est l'élement lui-même
// Quelqu'un pourrait-il m'aider à traduire la phrase indice=... en français ?
>> monSelect.selectedIndex est une propriété du select qui te donne l'indice de l'option selectionnée
>> monSelect.options est le vecteur d'options du select
>> .value pour avoir la valeur associée à l'option selectionnée.
chaine ="";
// on initialise une variable pour débuter la phrase ?
>> oui, une chaine vide au début
chaine += "<input type=\"checkbox\"> association ";
// on met un + à la variable pour y ajouter ce qui suit le = ?
>> oui, c'est l'equivalent de chaine = chaine + ....
chaine += association[indice];
chaine += "<br>";
chaine += "<input type=\"checkbox\"> administration ";
chaine += administration[indice];
document.getElementById('message').innerHTML = chaine;
//document.getElementById('message'), c'est une fonction intégrée de javacript? elle s'utilise pour quoi en générale?
>> c'est la façon DOM d'adresser un élement. Ca retourne l'élement HTML ayant l'identifiant donné.
// innerHTML c'est quoi? une fonction intégrée? qui sert à quoi ?
>> innerHTML est une propriété des élements HTML qui donne le code HTML contenu dans l'élement (là on s'en sert en affectation).


<select name="test" id="test" onchange= "doTest(this)">
// A quoi sert id="test" ?
>> si on doit faire un document.getElementById(), un jour (c'est en prévision)
// A quoi sert le (this) de doTest ? doTest indique la fonction mais pourquoi (this) ?
>> c'est l'argument. this désigne l'élement courant (donc le select) et est passé comme argument de la fonction, pour qu'on puisse l'utiliser dans la fonction..

---

Réponse très complète, qui amène d'autres questions... merci :D

"monSelect est un élement HTML, qu'on a passé en argument à la fonction lors de son appel "
Je ne comprend pas : select est un élément HTML, mais monSelect n'a pas d'existence prédéfinie, c'est un nom choisi comme ça au moment d'écrire le script nom?

"monSelect.options est le vecteur d'options du select "
Qu'est ce qu'un "vecteur d'options"?

"c'est la façon DOM d'adresser un élement"
Qu'est ce que la façon DOM et qu'est ce que l'adressage d'un élément? Sont-ce des termes spécifique à javascript? (j'en doute)

Citation:

---

Envoyé par psychoBob

"monSelect est un élement HTML, qu'on a passé en argument à la fonction lors de son appel "
Je ne comprend pas : select est un élément HTML, mais monSelect n'a pas d'existence prédéfinie, c'est un nom choisi comme ça au moment d'écrire le script nom?

---

Select est un élement HTML. monSelect est un nom de variable (on aurait pu prendre autre chose) qui représente un élement HTML de type Select

Citation:

---

Envoyé par psychoBob

"monSelect.options est le vecteur d'options du select "
Qu'est ce qu'un "vecteur d'options"?

---

Un array (tu connais, maintenant) qui contient des élements HTML de type option, lié à ce select

Citation:

---

Envoyé par psychoBob

"c'est la façon DOM d'adresser un élement"
Qu'est ce que la façon DOM et qu'est ce que l'adressage d'un élément? Sont-ce des termes spécifique à javascript? (j'en doute)

---

DOM (Document Object Model) est une norme de W3C qui est utilisé en particulier par JavaScript, mais qui existe en général dans tous les langages (cf jdom en java,...)

ok mais alors je ne comprend pas pourquoi l'on a pas "monSelect" de mentionné dans le champs select lui même. Je ne pige pas à quoi sert cette variable en fait.

"monSelect est un nom de variable (on aurait pu prendre autre chose) qui représente un élement HTML de type Select "

Par quel mécanisme obscur, ce nom de variable se prend-il à représenter un élément HTML ?

Bon quoi qu'il en soit je vais lire deux trois tutoriels sur les fonctions.

EN TOUT CAS MERCI

Citation:

---

Envoyé par psychoBob

"monSelect est un nom de variable (on aurait pu prendre autre chose) qui représente un élement HTML de type Select "

---

Ben c'est juste un paramètre de la fonction, comme dans tout autre langage de programation..... Le typage n'est pas fort en JS, c'est nous qui savons ce que nous lui passerons :)

Mais lis les tutos, ça ira mieux après :wink: