PHP/JavaScript [Résolu/Fermé]

Messages postés
230
Date d'inscription
jeudi 19 novembre 2009
Statut
Membre
Dernière intervention
19 mai 2015
- - Dernière réponse : 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!
Afficher la suite 

8 réponses

Messages postés
1550
Date d'inscription
jeudi 20 novembre 2008
Statut
Membre
Dernière intervention
30 décembre 2013
141
0
Merci
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.
Messages postés
230
Date d'inscription
jeudi 19 novembre 2009
Statut
Membre
Dernière intervention
19 mai 2015
19
0
Merci
J'avais pensé à une fonction JavaScript onClick, qui mettrai à jour mon texte mais je n'arrive pas à l'adapter à un SELECT d'un formulaire :/
Messages postés
630
Date d'inscription
mardi 12 juin 2007
Statut
Membre
Dernière intervention
19 février 2016
374
0
Merci
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";
Messages postés
230
Date d'inscription
jeudi 19 novembre 2009
Statut
Membre
Dernière intervention
19 mai 2015
19
0
Merci
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 :/
Messages postés
630
Date d'inscription
mardi 12 juin 2007
Statut
Membre
Dernière intervention
19 février 2016
374
0
Merci
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!
Messages postés
230
Date d'inscription
jeudi 19 novembre 2009
Statut
Membre
Dernière intervention
19 mai 2015
19
0
Merci
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!
Messages postés
630
Date d'inscription
mardi 12 juin 2007
Statut
Membre
Dernière intervention
19 février 2016
374
0
Merci
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!
Messages postés
230
Date d'inscription
jeudi 19 novembre 2009
Statut
Membre
Dernière intervention
19 mai 2015
19
0
Merci
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!