Afficher div en fonction du <select>

Eléphant du PHP | 398 Messages

04 juil. 2008, 16:27

Yop c est encore moi...décidément avec le javascript, même des trucs tres simples, je ne m'en sort pas >_<.
Pour un formulaire d'inscription, je désirerai afficher un <div> en fonction de l'option sélectionnée dans le <select>.
Si un div est affiché, les autres sont masqués. Dans ces div, du code HTML sera integré.

Code : Tout sélectionner

<script type="text/javascript"> function changeDiv(){ var nomSelect = document.forms['frmTest'].metier; var expl = document.getElementById("expl"); var sica = document.getElementById("sica"); //alert(numOption); for(i = 0; i < nomSelect.length; i++) { var numOption = nomSelect.options[i].value; if(numOption == 1){ expl.style.display = "block"; sica.style.display = "none" }else if(numOption == 2) { sica.style.display = "block"; expl.style.display = "none"; }else{ sica.style.display = "none"; expl.style.display = "none"; } } </script> <form name="frmTest"> <select name="metier" id="metier" size="4" ondblclick="changeDiv();" > <option>Selectionner</option> <option value="1">Exploitant</option> <option value="2">SICA</option> <option value="3">Ouvrier</option> </select> </form> <div id="expl">code pour exploitant</div> <div id="sica">code pour sica</div>
Merci d'avance
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

Eléphant du PHP | 377 Messages

04 juil. 2008, 16:33

alors, d'abord l'écouteur n'est pas le bon : tu veux changer ce qui est affiché quand la valeur du select change, pas quand on double-clique dessus (ce qui excluerait les gens qui naviguent au clavier, et même pas mal de gens à la souris...).
Donc changer "ondblclick" par "onchange"
Ensuite pour la fonction, il ne faut pas boucler sur toutes les valeurs contenues dans le select, mais trouver celle qui est sélectionnée
Donc :

Code : Tout sélectionner

function changeDiv(){ var expl = document.getElementById("expl"); var sica = document.getElementById("sica"); var numOption = this.value; // this correspond ici au select if(numOption == 1){ expl.style.display = "block"; sica.style.display = "none" }else if(numOption == 2) { sica.style.display = "block"; expl.style.display = "none"; }else{ sica.style.display = "none"; expl.style.display = "none"; } }
Petit scarabée deviendra grand

Mammouth du PHP | 1353 Messages

04 juil. 2008, 16:43

Je ne suis pas sur que ca marche avec un this.value dans cette fonction, je pense pas que this existe...

je pense qu'il faut que le select passe en paramètre la valeur :

Code : Tout sélectionner

<select name="metier" id="metier" size="4" onchange="changeDiv(this.value);" >
et avoir simplement ta fonction

Code : Tout sélectionner

function changeDiv(numOption){ //... }
Mais pour le reste je suis d'accord avec Shrell ;)
Tell me and I forget. Teach me and I remember. Involve me and I learn.

Eléphant du PHP | 398 Messages

04 juil. 2008, 17:01

Merci ;) j'ai donc changé de cette façon :

le js :

Code : Tout sélectionner

function changeDiv(numOption){ var expl = document.getElementById("expl"); var sica = document.getElementById("sica"); // var numOption = this.value; // this correspond ici au select if(numOption = 4){ expl.style.display = "block"; sica.style.display = "none" } if(numOption = 3) { sica.style.display = "block"; expl.style.display = "none"; } else{ sica.style.display = "none"; expl.style.display = "none"; } }
Dailleurs, dans les if, ce serait mieux de mettre un simple = vu que ce sont des integer et nn des chaines de caractère ?

le select :
$sCodeInput = '<select size="1" name="num_level" id="num_level" style="max-width: 200px;" onchange="changeDiv(this.value);"';
if (!$oInscription->m_bModeEdition  ){
	$sCodeInput .= 'disabled="disabled"';
}	
$sCodeInput .= '>';
$sCodeInput .= '<option>S&eacute;lectionner</option>';
foreach ($oInscription->m_aListeLevel as $sCle => $sValeur) {
	$sCodeOption = '<option';
	$sCodeOption .= ' style="width: 100px;" value=' . $sCle . '>';
	$sCodeOption .= $sValeur['level'].'</option>';
	$sCodeInput .= $sCodeOption;
} 										
$sCodeInput .= '</select>';
echo $sCodeInput;	
En affichant le $sClé, je me suis aperçu que les value sur lesquels je joue ont les valeurs 3 et 4, et non 1 & 2 (dejà ça regle un soucis).
L affichage HTML se faisant ds un tableau (malheuresement ce n est pas moi qui ait fait l'interface graphique...sinon j aurai jamais utilisé un tableau...), je met les <div> dans un :
<tr><td>
<div id=sica">blabla</div>
<dov id="expl">blabla2</div>
</td></tr>

Mais ça n'affiche que le div pour SICA :/.
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

Mammouth du PHP | 1353 Messages

04 juil. 2008, 17:13

Dailleurs, dans les if, ce serait mieux de mettre un simple = vu que ce sont des integer et nn des chaines de caractère ?
:evil: Surtout pas !

L'opérateur = est une affectation (x=1 donne la valeur 1 à x) alors que == est une comparaison.

Si tu fais if(x=3) ca sera toujours vrai car ca donne la valeur 3 à x et c'est tout, alors que if(x==3) c'est vrai si x vaut 3 c'est faux sinon...

La différence entre comparer des entiers et une chaine est de faire

if(x==3) //x est un entier
if(x=="3") //x est une chaine

C'est surement a cause de ca que tu code ne marche pas, car quelle que soit la valeur de numOption tu fais un numOption=4 donc tu donnes la valeur 4 à numOption...
Modifié en dernier par guilt92 le 04 juil. 2008, 17:16, modifié 4 fois.
Tell me and I forget. Teach me and I remember. Involve me and I learn.

Eléphant du PHP | 377 Messages

04 juil. 2008, 17:13

non non : pas de = simple, c'est un affectation, quel que soit le type de données
pour tester, c'est toujours ==
Petit scarabée deviendra grand

Eléphant du PHP | 398 Messages

04 juil. 2008, 17:21

Oké c est rectifié, on avance...maintenant je na ffiche que le <div> correspondant au champs Exploitatation, alors que celui correspondant au champs SICA ne s'affiche plus...comment ne pas s'arracher les cheveux à qq mn du Week-end :lol:
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe

Mammouth du PHP | 1353 Messages

07 juil. 2008, 09:32

Poste ton code actuel stp et si jamais tu peux expliquer un tout petit plus en détail le problème...
Tell me and I forget. Teach me and I remember. Involve me and I learn.

Eléphant du PHP | 398 Messages

07 juil. 2008, 16:24

Oké, alors je fignole une page d'inscription pour un site qui servira d'aide pour des agriculteurs.
Sur ce formulaire, en premier lieu, la personne doit renseigner son métier, qui sont de 3 différents :
Sica (id : 3) qui sont des Societés d'Iterêts Collectif Agricol
Exploitant (id : 4) : gerant d'une exploitation agricole
Ouvrier agricole (id : 5) qui travaille au sein d'une exploitation.

Si il choisi SICA, le formulaire doit afficher dans une balise <select> la liste des SICA enregistrées dans la base, si il opte pour Exploitant, il choisit la SICA auquel il est affilié ainsi que le numero de son exploitation (que l on appelle numero de pacage).
Pour ça que j ai créé deux <div> qui sont par defaut masqués et qui s'affiche en fonction du choix de l'utilisateur.

Code javascript:

Code : Tout sélectionner

<script type="text/javascript"> function changeDiv(numOption){ var expl = document.getElementById("div_expl"); var sica = document.getElementById("div_sica"); //alert("Num de l option "+numOption); // var numOption = this.value; // this correspond ici au select //EXPLIUTATIOn if(numOption == 4){ expl.style.display = "block"; sica.style.display = "none" } //SICA if(numOption == 3) { expl.style.display = "none"; sica.style.display = "block"; } /*else{ sica.style.display = "none"; expl.style.display = "none"; }*/ } </script>
Sélection du métier
<p class="consignes-form">S&eacute;lectionnez votre m&eacute;tier</p>
<?php
	$sCodeInput = '<select size="1" name="num_level" id="num_level" style="max-width: 200px;" onchange="changeDiv(this.value);"';
	if (!$oInscription->m_bModeEdition  ){
		$sCodeInput .= 'disabled="disabled"';
	}	
	$sCodeInput .= '>';
	$sCodeInput .= '<option>S&eacute;lectionner</option>';
	foreach ($oInscription->m_aListeLevel as $sCle => $sValeur) {
		$sCodeOption = '<option';
		$sCodeOption .= ' style="width: 100px;" value=' . $sCle . '>';
		$sCodeOption .= $sValeur['level'].'</option>';
		$sCodeInput .= $sCodeOption;
	} 										
	$sCodeInput .= '</select>';
echo $sCodeInput;										
?>
<br />
Si l'user opte pour Exploitation :
<div id="expl" style="display:none;">
<p class="consignes-form">Si vous &ecirc;tes exploitant :</p>
<p class="consignes-form">S&eacute;lectionnez votre SICA</p>
<?php
	$sCodeInput = '<select name="sica" id="sica" class="marge-combo" style="max-width:200px;"';
	if (!$oInscription->m_bModeEdition  ){
		$sCodeInput .= 'disabled="disabled"';
	}	
						
	$sCodeInput .= '>';
	$sCodeInput .=	'<option value="1">S&eacute;lectionner</option>';
	foreach ($oInscription->m_aListeSica as $sCle => $sValeur) {
																	
		$sCodeOption = '<option';
		$sCodeOption .= ' style="width: 100px;" value="'.$sCle.'"'; 
		$sCodeOption .= '>';
		$sCodeOption .= $sValeur['nom_sica'].'</option>';
		$sCodeInput .= $sCodeOption;
	} 
	$sCodeInput .= '</select>';
	echo $sCodeInput;									?>												
<p class="consignes-form">Selectionnez le num&eacute;ro de pacage de votre exploitation</p>
<?php														
	$sCodeInput = '<input type="text" id="num_pac" name="num_pac" maxlength="50" size="25" class="taille-champ-saisie"';
	if (!$oInscription->m_bModeEdition){
		$sCodeInput .= 'disabled="disabled"';
	}
	$sCodeInput .= '>';
	echo $sCodeInput;									?>												
</div>
Et dans le cas ou il opte pour SICA :
<div id="sica" style="display:none;">
<p class="consignes-form">Si representez une SICA :</p>
<p class="consignes-form">S&eacute;lectionnez votre SICA</p>
<?php
	$sCodeInput = '<select name="sica" id="sica" class="marge-combo" style="max-width: 200px;"';
	if (!$oInscription->m_bModeEdition  ){
		$sCodeInput .= 'disabled="disabled"';
	}	
						
	$sCodeInput .= '>';
	$sCodeInput .=	'<option value="1">S&eacute;lectionner</option>';
	foreach ($oInscription->m_aListeSica as $sCle => $sValeur) {
																	
		$sCodeOption = '<option';
		$sCodeOption .= ' style="width: 100px;" value="'.$sCle.'"'; 
		$sCodeOption .= '>';
		$sCodeOption .= $sValeur['nom_sica'].'</option>';
		$sCodeInput .= $sCodeOption;
	} 
	$sCodeInput .= '</select>';
	echo $sCodeInput;
?>	
</div>
Le probleme venais apparement du nommage des <div>, il y avait conflit entre le nom du div sica (renommé en div_sica et les balises select qui s'appele aussi sica.

Probleme résolu (pendant la redaction du post qui plus est !!)
Merci bcp :)
----------------------------------------------------------------------------------
https://astro-otter.space - Discover wonders and mysteries of Universe