Affichage selectif de label suivant le contenu d'un champ

Résolu/Fermé
pulls Messages postés 136 Date d'inscription mercredi 30 décembre 2009 Statut Membre Dernière intervention 13 septembre 2023 - 26 déc. 2012 à 16:03
pulls Messages postés 136 Date d'inscription mercredi 30 décembre 2009 Statut Membre Dernière intervention 13 septembre 2023 - 29 déc. 2012 à 18:37
Bonjour,

je suis débutant en developpement web. Dans un formulaire php, J'ai une liste déroulante qui contient 2 éléments ( entree et sortie).

Je voudrais que quand je sélectionne ENTREE, le Label EXPEDITEUR s'affiche dans le champ suivant, et si par contre je selectionne plutot SORTIE, que le Label DESTINATAIRE s'affiche dans le champ suivant.

Je ne sais comment procéder.

Je vous prie de m'aider
97</config>

9 réponses

tryan44 Messages postés 1288 Date d'inscription mardi 24 janvier 2012 Statut Membre Dernière intervention 26 octobre 2014 220
26 déc. 2012 à 17:56
Salut,

Je n'ai pas saisie quoi doit s'afficher ou?
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
27 déc. 2012 à 16:53
Bonsoir,

une solution:
<head>
<script type="text/javascript">
function ecrire_input(){
	//on lit le choix dans la liste
	var choix_liste=document.getElementById('liste1').value;
	//on atteint le div a ecrire 
	var div_champ_input=document.getElementById('id_ecrire');
	if(choix_liste == 'entree'){
		//on ecrit l'input avec le label Expediteur
		div_champ_input.innerHTML='<label>EXPEDITEUR</label><input type="texte" name="champ_x" value="" />';
	}else if(choix_liste == 'sortie'){
		//on ecrit l'input avec le label Destinataire
		div_champ_input.innerHTML='<label>DESTINATIRE</label><input type="texte" name="champ_x" value="" />';
	}else{
		
		//on ecrit rien
		div_champ_input.innerHTML='';
	
	}

}
</script>
</head>
<body>
<form name="form1" method="post" action="...." >
<select name="liste1" id="liste1" onchange="ecrire_input();" >
	<option value="-1"> -- Choisissez --</option>
	<option value="entree"> Entrée</option>
	<option value="sortie">Sortie</option>

</select>
<div id="id_ecrire"><!-- la sera ecrit l'input --></div>
......
pulls Messages postés 136 Date d'inscription mercredi 30 décembre 2009 Statut Membre Dernière intervention 13 septembre 2023 3
27 déc. 2012 à 17:11
Bonsoir,

je vous remercie infiniment de vouloir m'aider. S'il vous plait, après beaucoup de recherches , j'ai essayé de faire ce que vous me proposez, mais ça ne marche. Je voudrais savoir si c'est mon environnement de developpement qui ne supporte pas INNERHTML, car je developpe sur dreamweaver cs3, peut etre ma version de HTML ne supporte pas cela.

Y a t-il un problème de version de HTML?

merci
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
27 déc. 2012 à 17:25
Testes directement dans ton navigateur

et c'est innerHTML

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

Posez votre question
pulls Messages postés 136 Date d'inscription mercredi 30 décembre 2009 Statut Membre Dernière intervention 13 septembre 2023 3
Modifié par pulls le 27/12/2012 à 18:28
Excusez moi,

Sans abuser de votre temps, je ne comprends pas ce que vous voulez dire par tester directement dans le navigateur. J'utilise Dreamweaver CS3 , pour tapez mes codes, voici ce que j'ai fait:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=latin1" /> 

<title>ag_ajout mouvement</title> 
<?php  
//Importation des fonctions 
 include '../function/configConnexion.php'; 
 include '../function/function.php'; 
  
?> 

<script language="javascript" src="function/function_js.js"></script> 
<script language="javascript"> 
function showChoice(){ 

 var choix_liste=document.getElementById('liste1').value; 
 var div_champ_input=document.getElementById('id_ecrire'); 
  
  if (choix_liste=='Sortie'){ 
   div_champ_input.innerHTML='<p> Bonjour mes amis </p>'; 
   } 
  else if (choix_liste=='Entree'){ 
   
     div_champ_input.innerHTML='<p> Bonjour mes copains </p>'; 
     } 
  else 
   { 
   div_champ_input.innerHTML=' '; 
   } 


</script> 


</head> 


<body onload="document.form.date.focus()"> 
<form id="form" name="form"  action="mouvement_ajoutForm_test.php" method="post"> 
  <table class="important" width="553" height="228" border="0" cellpadding="0" cellspacing="10" bgcolor="#FF00FF"> 
     
    <tr> 
      <td width="109" height="150"><div align="right" class="Style12">Type:</div></td> 
      <td width="200"><label> 
        <select name="liste1" id="liste1" onchange="showChoice();"  > 
          <option value="init">Type mouvement</option> 
          <option value="Entree">Entrée</option> 
          <option value="Sortie">Sortie</option> 
        </select> 
      </label></td> 
      <td width="174" colspan="2" > 
         
        <table width="204" height="91" border="0" cellspacing="2" bordercolor="#0000FF" id="id_ecrire"> 
          <p> Bonjour</p> 
            </table>     </td> 
    </tr> 
  </table> 
</form> 
</body> 
</html> 




j'ai voulu faire quelque chose de simple d'abord, mais Bonjour mes amis ou bonjour mes copains ne s'affiche pas dans le navigateur, pourtant le formulaire s'affiche bien avec Bonjour.

veuillez un peu regarder s'il vous plait.
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
27 déc. 2012 à 20:37
une erreur dans ton code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=latin1" /> 

<title>ag_ajout mouvement</title> 
<?php  
//Importation des fonctions 
 include '../function/configConnexion.php'; 
 include '../function/function.php'; 
  
?> 

<script language="javascript" src="function/function_js.js"></script> 
<script language="javascript"> 
function showChoice(){ 

 var choix_liste=document.getElementById('liste1').value; 
 var div_champ_input=document.getElementById('id_ecrire'); 
  
  if (choix_liste=='Sortie'){ 
   div_champ_input.innerHTML='<p> Bonjour mes amis </p>'; 
   } 
  else if (choix_liste=='Entree'){ 
   
     div_champ_input.innerHTML='<p> Bonjour mes copains </p>'; 
     } 
  else 
   { 
   div_champ_input.innerHTML=' '; 
   } 

} //il te manquait cette accolade
</script> 


</head> 


<body onload="document.form.date.focus()"> 
<form id="form" name="form"  action="mouvement_ajoutForm_test.php" method="post"> 
  <table class="important" width="553" height="228" border="0" cellpadding="0" cellspacing="10" bgcolor="#FF00FF"> 
     
    <tr> 
      <td width="109" height="150"><div align="right" class="Style12">Type:</div></td> 
      <td width="200"><label> 
        <select name="liste1" id="liste1" onchange="showChoice();"  > 
          <option value="init">Type mouvement</option> 
          <option value="Entree">Entrée</option> 
          <option value="Sortie">Sortie</option> 
        </select> 
      </label></td> 
      <td width="174" colspan="2" > 
         
        <table width="204" height="91" border="0" cellspacing="2" bordercolor="#0000FF" id="id_ecrire"> 
          <p> Bonjour</p> 
            </table>     </td> 
    </tr> 
  </table> 
</form> 
</body> 
</html> 


ensuite je ne connait pas dreamweaver mais pour tester un code tu l'enregistres et ensuite tu tapes son adresse dans la barre d'adresse du navigateur le javascript sera exécuté.
pulls Messages postés 136 Date d'inscription mercredi 30 décembre 2009 Statut Membre Dernière intervention 13 septembre 2023 3
28 déc. 2012 à 08:43
Merci Alain_42,

ouf, ça marche enfin... merci

Dites moi s'il vous plait, est ce qu'il n'y a pas un débogueur pour javascript? un environnement pour tester les codes pour chercher l'erreur?

Cordialement.
Alain_42 Messages postés 5361 Date d'inscription dimanche 3 février 2008 Statut Membre Dernière intervention 13 février 2017 894
28 déc. 2012 à 20:42
un debogueur oui, si tu utilises Firefox comme navigateur, tu as dans menu Outils Developeur web
tu as console d'erreur
pulls Messages postés 136 Date d'inscription mercredi 30 décembre 2009 Statut Membre Dernière intervention 13 septembre 2023 3
29 déc. 2012 à 18:37
Merci Alain_42, pour tout ce que vous faites pour moi, je ne saurai jamais vous le dire.

Le débogueur de Firefox m'a permis de trouver une grosse erreur dans mes codes.

Regardez:

function schowchoice(){

	var choix_liste=document.getElementById('type').value;
	var div_champ_input=document.getElementById('id_ecrire');
	
		if (choix_liste=='Sortie'){
			div_champ_input.innerHTML='<p> Bonjour mes amis </p>';
			}
		else if (choix_liste=='Entree'){
		
div_champ_input.innerHTML='<table width="179" border="0">
<tr><td>Expéditeur</td></tr>
<tr><td>&nbsp;
  </td></tr> </table>';      
         
        
     
		   }
		else
			{
			div_champ_input.innerHTML=' ';
			}

}




Grâce au débogueur, j'ai compris qu'il fallait faire la concatenation de toutes ces lignes comme suit:


function schowchoice(){

var choix_liste=document.getElementById('type').value;
var div_champ_input=document.getElementById('id_ecrire');

if (choix_liste=='Sortie'){
div_champ_input.innerHTML='<p> Bonjour mes amis </p>';
}
else if (choix_liste=='Entree'){
div_champ_input.innerHTML='<table width="179" border="0"><tr>td>Expéditeur</td></tr><tr><td> '+
'</td></tr> </table>';



}
else
{
div_champ_input.innerHTML=' ';
}

}


Encore merci


J'aimerai vous connaitre Alain_42, si vous le permettez, je ne sais pas si c'est autorisé d'échanger de emails dans ce forum.