Se connecter / S'enregistrer
Votre question

Formulaire html et JS

Tags :
  • Select
  • Programmation
Dernière réponse : dans Programmation
1 Février 2011 11:07:51

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

a c 145 L Programmation
1 Février 2011 12:19:34

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.
m
0
l
11 Février 2011 09:44:27

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
m
0
l
Contenus similaires
a c 145 L Programmation
11 Février 2011 11:25:16

Je ne comprends pas ta difficulté.
Quel est ton souci, qu'as tu fait suite à ma réponse ?
m
0
l
11 Février 2011 11:33:24

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
m
0
l
a c 145 L Programmation
11 Février 2011 11:58:14

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".
m
0
l
11 Février 2011 13:28:09

ok bien recu.
Du coup, que me conseilles-tu ?
m
0
l
a c 145 L Programmation
11 Février 2011 14:18:44

De lire ma première réponse et de l'appliquer.
m
0
l
14 Février 2011 16:28:27

ok je le fais au plus vite. Je te tiens au courant crazycat.
m
0
l
21 Février 2011 09:05:04

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="http://www.mabastide.fr/images/normes_immo.gif" 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.
m
0
l
a c 145 L Programmation
21 Février 2011 09:10:12

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".
m
0
l
21 Février 2011 11:47:03

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="http://www.mabastide.fr/images/normes_immo.gif" 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
m
0
l
a c 232 L Programmation
21 Février 2011 11:57:50

J'ai pas tout regardé, mais pas sûr qu'il faille mettre # dans le getElementById
m
0
l
21 Février 2011 12:13:57

ha bon ?
m
0
l
a c 145 L Programmation
21 Février 2011 12:22:23

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)
m
0
l
24 Février 2011 08:53:57

Je n'y arrive désespérément pas, et surtout par manque de temps, je ne peux pas me pencher à fond dessus.
http://www.mabastide.fr/passez-votre-annonce.html
Une seconde liste déroulante apparaît au choix d'un titre à la liste parente. Si on met ce dernier script ça n'affiche plus la seconde liste déroulante qui apparaît au choix d'un titre de son parent.

Ca va me rendre chèvre ! :pt1cable: 
m
0
l
7 Mars 2011 10:49:40

Est-ce que quelqu'un a la solution ?
Thanks
m
0
l
7 Mars 2011 10:50:43

Sans mettre le # , ça ne change rien. Peut être faut-il une autre fonction ?
m
0
l
a c 145 L Programmation
7 Mars 2011 11:45:09

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.
m
0
l
7 Mars 2011 11:58:54

l'inscription est gratuite garanti sans spam ni newsletter alors n'hésite pas
m
0
l
a c 145 L Programmation
7 Mars 2011 12:06:45

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 :) 
m
0
l
7 Mars 2011 13:22:43

ok je comprends tout à fait
m
0
l
Tom's guide dans le monde
  • Allemagne
  • Italie
  • Irlande
  • Royaume Uni
  • Etats Unis
Suivre Tom's Guide
Inscrivez-vous à la Newsletter
  • ajouter à twitter
  • ajouter à facebook
  • ajouter un flux RSS