PHP/JavaScript

Résolu/Fermé
zivodul8 Messages postés 230 Date d'inscription jeudi 19 novembre 2009 Statut Membre Dernière intervention 19 mai 2015 - 15 mars 2012 à 13:31
zivodul8 Messages postés 230 Date d'inscription jeudi 19 novembre 2009 Statut Membre Dernière intervention 19 mai 2015 - 24 mars 2012 à 09:06
Bonjour,

Je souhaite mettre à jour du texte en fonction d'option d'un select choisi. Voici mon code :

<SELECT name="type" style="height: 20px; width: 250px;">
<OPTION VALUE="Logements">Logement</OPTION>
<OPTION VALUE="Fournitures">Fourniture</OPTION>
<OPTION VALUE="Emplois">Emploi</OPTION>
<OPTION VALUE="Matériel">Matériel</OPTION>
</SELECT>


Si type=Logement alors
Texte = "Loyer"
Sinon
Texte = "Prix"

Voilà ce que je souhaiterai. ça ne doit pas être compliqué mais je ne trouve rien sur le net!

Merci!
A voir également:

8 réponses

Skeletyon Messages postés 1552 Date d'inscription jeudi 20 novembre 2008 Statut Membre Dernière intervention 30 décembre 2013 156
15 mars 2012 à 14:49
Bonjour.

Le changement de texte, doit-il se faire automatiquement ou au rechargement de la page par un clic sur un bouton?

Si c'est de façon automatique, il faut passer par l'AJAX. Des tutos sont disponibles un peu partout et il faut s'accrocher au début.

Sinon vous devez créer un bouton qui envoie les informations à une page de traitement et affiche alors le texte voulu. Là, pas vraiment besoin de JS, mais pourquoi pas.
0
zivodul8 Messages postés 230 Date d'inscription jeudi 19 novembre 2009 Statut Membre Dernière intervention 19 mai 2015 22
15 mars 2012 à 14:53
J'avais pensé à une fonction JavaScript onClick, qui mettrai à jour mon texte mais je n'arrive pas à l'adapter à un SELECT d'un formulaire :/
0
Doctor C Messages postés 627 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 19 février 2016 398
Modifié par Doctor C le 15/03/2012 à 16:59
Tu devrais regarder dans la direction du onChange.

<SELECT name="type" style="height: 20px; width: 250px;" onchange="alert('Index: ' + this.selectedIndex + '\nValeur: ' +  
  this.options[this.selectedIndex].value)"> 
<OPTION VALUE="Logements">Logement</OPTION> 
<OPTION VALUE="Fournitures">Fourniture</OPTION> 
<OPTION VALUE="Emplois">Emploi</OPTION> 
<OPTION VALUE="Matériel">Matériel</OPTION> 
</SELECT>

En gros, lorsque la valeur de ton select change, la fonction du onChange est exécutée.


Echo "Lima Mike Alfa";
0
zivodul8 Messages postés 230 Date d'inscription jeudi 19 novembre 2009 Statut Membre Dernière intervention 19 mai 2015 22
20 mars 2012 à 20:42
Je me suis penché sur ça, mais ça ne marche pas :

<SCRIPT type="text/javascript">

function alert()
{
if(document.essai.type.selectedIndex == 2)
  document.getElementById("montexte").text = "essai";

if...
}

</SCRIPT>

[...]

<SELECT name="type" onchange="alert()">
<OPTION VALUE="Erreur"></OPTION>
<OPTION VALUE="Logements">Logement</OPTION>
<OPTION VALUE="Fournitures">Fourniture</OPTION>
<OPTION VALUE="Emplois">Emploi</OPTION>
<OPTION VALUE="Matériel">Matériel</OPTION> 
</SELECT>

[...]

<tr>
<th id="montexte">ICI LE TEXTE QUI CHANGERA</th>
</tr>


Ça doit pas être grand chose mais je ne vois pas :/
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Doctor C Messages postés 627 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 19 février 2016 398
21 mars 2012 à 19:47
Salut,

J'ai fait des petits tests afin de me dégourdir les doigts et je suis arrivé à une solution qui devrait te plaire:

<html>
<head>

<SCRIPT type="text/javascript">

function traiterInfo()
{
	var valeurDuSelect = document.getElementById("seltype").value;
	var input = document.getElementById("reponse");
	var input2 = document.getElementById("reponse2");
	var info = "";	

	if(valeurDuSelect == "Logements"){
		info = "Logement - Loyer";
	}else if(valeurDuSelect == "Fournitures"){
		info = "Fournitures - Prix";
	}else if(valeurDuSelect == "Emplois"){
		info = "Emplois - Prix";
	}else if(valeurDuSelect == "Matériel"){
		info = "Matériel - Prix";
	}else{
		info = "Erreur";
	}

	input.value = info;
	input2.innerHTML = info;
}

</SCRIPT>

</head>

<body>

<SELECT name="seltype" id="seltype" onchange="traiterInfo()">
<OPTION VALUE="Erreur"></OPTION>
<OPTION VALUE="Logements">Logement</OPTION>
<OPTION VALUE="Fournitures">Fourniture</OPTION>
<OPTION VALUE="Emplois">Emploi</OPTION>
<OPTION VALUE="Matériel">Matériel</OPTION> 
</SELECT>

<input type="text" name="reponse" id="reponse" />
<table><tr><th id="reponse2">Faites votre choix...</th></tr></table>

</body>
</html>


J'espère bien que ça peut t'aider!
0
zivodul8 Messages postés 230 Date d'inscription jeudi 19 novembre 2009 Statut Membre Dernière intervention 19 mai 2015 22
21 mars 2012 à 22:02
C'est parfait!! J'ai adapté deux trois trucs mais c'est exactement ce que je cherchais!! Merci!

Il ne me manque plus qu'une chose, c'est à l'arrivée sur ma page, rien ne s'affiche à la place de mon texte qui change :S Quelle est l'option pour l'affichage par défaut?

Merci beaucoup!
0
Doctor C Messages postés 627 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 19 février 2016 398
23 mars 2012 à 15:23
Si tu parles du champ où l'on affiche le résultat selon le choix (dans mon exemple le input et le tableau), tu n'aurais qu'à les initialiser comme tu le désires dans ton HTML. Après tout, ce qui est dans ton HTML devrait s'afficher au chargement de ta page.

<input type="text" name="reponse" id="reponse" value="Faites votre choix..." />
<table><tr><th id="reponse2">Faites votre choix...</th></tr></table>


Si tu désires séparer ton contenu de ton contenant (ce qui est toujours bien), tu peux aussi initialiser tous tes champs avec l'évènement onload du body. Avec cette méthode, tu n'aurais pas à mettre de valeur directement dans tes champs. Tes champs ressembleraient à ça:

<input type="text" name="reponse" id="reponse" />
<table><tr><th id="reponse2"></th></tr></table>


Les champs seraient plutôt initialisés dans un fonction javascript (on peut même en profiter pour initialiser ton select à l'option 0 (vide):

function initialiserPage()
{
	var message = "Faites votre choix...";

	document.getElementById("seltype").selectedIndex = 0;
	document.getElementById("reponse").value = message;
	document.getElementById("reponse2").innerHTML = message;
}


Et afin que cette initialisation soit faite au chargement de ta page, il faut l'appeler sur le onload de la balise body:

<body onload="initialiserPage()">


Personnellement, j'aime bien initialiser dans une fonction tout ce qui est propice à changer afin de s'assurer que tout revienne en ordre lorsqu'on recharge la page.

Si je n'ai pas répondu à ta question, n'hésite pas!
0
zivodul8 Messages postés 230 Date d'inscription jeudi 19 novembre 2009 Statut Membre Dernière intervention 19 mai 2015 22
24 mars 2012 à 09:06
C'est parfait, c'est exactement ce que je voulais meme si je me suis pas complique la vie, j'ai directement ecris dans mon HTML sans initialiser.

Encore merci et bonne continuation!
0