Se connecter avec
S'enregistrer | Connectez-vous

Formulaire html et JS

Dernière réponse : dans Programmation

Bonjour,
Je souhaite faire apparaître une image lorsque l'utilisateur a choisi un titre dans une liste déroulante.

Ma liste déroulante :
<[/contents/sql/sqlsel.php3 select] class='adsmanager_required' name='category_choose' onChange='change("category_choose",1)'>
<option value="-1" selected="selected">Choisissez une rubrique</option><option value="1">Immobilier</option><option value="2">Auto-moto</option><option value="4">Habitat</option><option value="65">Rencontres</option><option value="92">Le mag</option><option value="151">BIO / ECOLOGIE</option><option value="162">AGRICULTURE</option><option value="173">ECHANGE - TROC</option> </select>

Quand l’internaute a choisi Immobilier soit, <option value="1">, une image aparait dans une div placé au dessus du formulaire.

Je pense à une condition en JS mais ne sait pas l'écrire

Merci pour votre aide

Autres pages sur : formulaire html

Lassé par la pub ? Créez un compte
Expert Programmation

Donc dans ta fonction change() ?
Je ne sais pas ce qu'elle comporte, mais pour faire juste la partie image, ce serait:
  1. function change(selname, arg) {
    

  2.    myopt = document.getElementByName(selname);
    

  3.    mypic = document.getElementById('tondivimage').getElementsByTagName("img").item(0);
    

  4.    selid = myopt.options[myopt.selectedIndex].value;
    

  5.    mypic.src = selid+".png";
    

  6. }

Ceci va remplacer l'image qui est dans le div (avec id="tondivimage") par 1.png si on choisit Immobilier, 92.png si on choisit "Le mag", ...
Après, tu peux faire un tableau d'association des id avec des images différentes.

Bonjour Crazycat,
En fait cette liste déroulante affiche des titres contenus dans la base de données:

Citation :
<select class='adsmanager_required' name='category_choose' onChange='change("category_choose",1)'>
<?php
echo '<option value="-1" selected="selected">Choisissez une rubrique</option>';
while ($ligne = mysql_fetch_object($res_cat))
{
echo '<option value="'.$ligne->id.'">'.$ligne->name.'</option>';
}
?>
</select>


C'est du coup encore moins pratique pour un debutant

Suite à ta réponse,
je n'ai rien fait car j'ai remarqué entre temps que la liste déroulante pioche ses infos depuis la base de données alors que ta réponse porté sur un liste déroulante codé en html et js il me semble ?

Du coup je pense qu'il n'est pas nécessaire non plus de metre en place un champ id image dans la table, car une seule image doit apparaître a la selection d'un seul élément de la liste

Voila :

{
echo '<option value="'.$ligne->id.'">'.$ligne->name.'</option>';
}

Merci pour votre adie
Expert Programmation

Non, le fait que le liste soit générée à partir d'une base de données n'influe pas sur le HTML généré.
D'autant qu'il y a une boucle while, qui se traduit en français par "tant qu'il y a des enregistrements dans la base, ajouter la valeur à la liste".

crazycat@idn a dit :
De lire ma première réponse et de l'appliquer.


Bonjour, Crazycat,

Je viens t'annoncer que je n'arrive pas à rendre fonctionnel le code que tu m'as soumis dernièrement.

Voici mon code (qui doit surement comporter quelques erreurs) :

  1. <!-- form -->
    

  2.           <script type="text/javascript">
    

  3. 		  	function change(selname, arg) {
    

  4.   myopt = document.getElementByName(selname);
    

  5.   mypic = document.getElementById('#liste').getElementsByTagName("img" ).item(0);
    

  6.   selid = myopt.options[myopt.selectedIndex].value;
    

  7.   mypic.src = selid+".png";
    

  8. }
    

  9.           </script>
    

  10.  
  11.  
  12.  
  13. 		  <?php $target = sefRelToAbs("index.php?option=$option&page=save_ad&Itemid=$itemid");?>
    

  14. 		  <form action="<?php echo $target;?>" method="post" name="saveForm" enctype="multipart/form-data">
    

  15. 		  <label for="ad_kindof"><?php echo ADSMANAGER_FORM_CATEGORY; coco?></label>
    

  16. 		  	<?php
    

  17. 				$connexion = mysql_connect("") or die (mysql_error());
    

  18. 				mysql_select_db("mabastide",$connexion) or die ("Erreur lors de la sélection de la base de donnée");
    

  19. 				$categorie = "SELECT id,name FROM jos_adsmanager_categories WHERE parent = 0";
    

  20. 				$res_cat = mysql_query($categorie);
    

  21. 			?>
    

  22. 			<select class='adsmanager_required' name='category_choose' onChange='change("category_choose",1)'>
    

  23. 			<?php
    

  24. 				echo '<option value="-1" selected="selected">Choisissez une rubrique</option>';
    

  25. 			 	while ($ligne = mysql_fetch_object($res_cat))
    

  26. 				{
    

  27. 					echo '<option value="'.$ligne->id.'">'.$ligne->name.'</option>';
    

  28. 				}
    

  29. 			?>
    

  30. 			</select><br />
    

  31.  
  32.             <!--<img src="<a href="http://www.mabastide.fr/images/normes_immo.gif" target="_blank">http://www.mabastide.fr/images/normes_immo.gif</a>" alt="normes" align="right" title="Normes immobilier"/>--><br />
    

  33.  
  34. 			<div id="liste">
    

  35.             </div>


C'est sympa de ta part mais je ne parviens pas à l'appliquer de façon efficace visiblement. En espérant y parvenir je te souhaite une bonne journnée.
Expert Programmation

Tout d'abord, merci d'utiliser les balises code et non pas quote pour mettre du code.
Ensuite, il te manque une balise img dans le div "liste".
  1. mypic = document.getElementById('#liste').getElementsByTagName("img" ).item(0);

Cette ligne signifie que l'on va agir sur la première balise <img> contenue dans le div id="liste".

J'ai bien suivi ce que tu m'as dis mais je dois être trop novice.
Rien ne change, l'image reste affichée par défaut, même si l'on n'a pas encore choisi un élément dans la liste.
Voici le code :

  1. <select class='adsmanager_required' name='category_choose' onChange='change("category_choose",1)'>
    

  2. 			  <script type="text/javascript">
    

  3. 		  	function change(selname, arg) {
    

  4.   myopt = document.getElementByName(selname);
    

  5.   mypic = document.getElementById('#liste').getElementsByTagName("img" ).item(0);
    

  6.   selid = myopt.options[myopt.selectedIndex].value;
    

  7.   mypic.src = selid+".gif";
    

  8.  
  9. }
    

  10.           </script><?php
    

  11. 				echo '<option value="-1" selected="selected">Choisissez une rubrique</option>';
    

  12. 			 	while ($ligne = mysql_fetch_object($res_cat))
    

  13. 				{
    

  14. 					echo '<option value="'.$ligne->id.'">'.$ligne->name.'</option>';
    

  15. 				}
    

  16. 			?>
    

  17. 			</select>
    

  18.  
  19. 			<div id="liste">
    

  20. 				<script type="text/javascript"> mypic = document.getElementById('#liste').getElementsByTagName("img" ).item(0);</script>
    

  21.                 <img src="<a href="http://www.mabastide.fr/images/normes_immo.gif" target="_blank">http://www.mabastide.fr/images/normes_immo.gif</a>" alt="normes" align="right" title="Normes immobilier"/>
    

  22.             </div>
    

  23. 			<!-- category -->
    

  24.  
  25. 			<input type='hidden' name='category' value='-1' id='cat' />
    

  26. 			<input type="hidden" name="selectsscat" value="-1" id="selectsscat" />
    

  27. 			<!-- category -->


Merci pour ton aide crazy cat
Expert Programmation

Et je n'ai jamais dit de mettre:
  1. <script type="text/javascript"> mypic = document.getElementById('#liste').getElementsByTagName("img" ).item(0);</script>

dans le div. Le bout de code était là pour t'expliquer ce qui est fait.

Et je confirme ce que dit OmaR, le "#" ne doit pas y être (j'ai vite copié/collé ce que tu avais fait)
Expert Programmation

Est-ce que par hasard tu n'aurais pas omis de mettre dans ta fonction change() ce qui permet de faire apparaitre la seconde liste (et que tu devais avoir précédemment) ?

Je suis désolé de ne pas pouvoir t'aider plus, mais comme il faut être enregistré pour accéder à ta page, je ne peux pas voir in situ le souci.
Expert Programmation

Non. Ne serait-ce que pour le principe. Lorsqu'on développe, et surtout lorsqu'on demande une aide externe, on crée un (ou plusieurs) compte(s) de test.
Je ne m'inscris jamais à un site qui ne m'intéresse pas(*) et dont je n'aurais pas l'usage.

(*) : je veux dire que son contenu ou son sujet ne m'intéresse pas, pas que le site est inintéressant :) 
Lassé par la pub ? Créez un compte

Créer un nouveau sujet

Tom's guide dans le monde