IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

formulaire html et javascript


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Juillet 2010
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2010
    Messages : 19
    Par défaut formulaire html et javascript
    Bonjour, je suis débutant en JS et cherche désespérément de l'aide :

    Je m'explique, je cherche à faire apparaitre une image dans une div ou autre (si il le faut ) uniquement lorsque l'internaute a choisi une rubrique dans une liste déroulante d'un formulaire.
    La liste du formulaire :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <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>
    Je pensai utiliser du JS pour permettre l'affichage de l'img quand l'utilisateur a choisi : option value 1 (immobilier), mais plus que débutant dans ce langage, je ne saurai me d&ébrouiller sans votre aide...
    J'ai tout de meme essayé mais, cela semble plein d'erreur.

    mon script :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <script type="text/javascript">if (
        option value = 1;
        background-image  div (id='img_immo') = 'visible';    )
    </script>
    Merci pour vos réponses

  2. #2
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Janvier 2008
    Messages
    623
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hauts de Seine (Île de France)

    Informations forums :
    Inscription : Janvier 2008
    Messages : 623
    Par défaut
    Il te faudrait lancer une fonction sur l'évenement onchange de ton select.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Juillet 2010
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2010
    Messages : 19
    Par défaut
    J'ai compris mais ne sait pas faire, j'ai tenté mais sans résultat :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <script type="text/javascript">
    	function changerimage() {
    			$("#img_immo"){
    					$(".adsmanager_required").choose 'option value=1'(function(){
    													 load. $("#img_immo") "img/images1.jpg";				 
    																			   };
    																			   };
    			};
     
    </script>
     
    <div id="img_immo">
    </div>
     
    <select class='adsmanager_required' name='category_choose' onChange='change("category_choose",1) "javascript:changerimage(this);"'>
    			<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</opt......

    Merci pour vos réponses

  4. #4
    Membre éclairé
    Homme Profil pro
    Inscrit en
    Janvier 2008
    Messages
    623
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Hauts de Seine (Île de France)

    Informations forums :
    Inscription : Janvier 2008
    Messages : 623
    Par défaut
    Tu utilise JQuery?

    Si c'est le cas, il y a exactement ce que tu cherche ici : http://api.jquery.com/change/.

  5. #5
    Expert confirmé

    Homme Profil pro
    Développeur Web
    Inscrit en
    Septembre 2010
    Messages
    5 418
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Puy de Dôme (Auvergne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Septembre 2010
    Messages : 5 418
    Par défaut
    Si tu veux comprendre un petit exemple fonctionnel tu peux regarder ce code.

    Il permet d'afficher des images différentes suivant la rubrique choisie.

    Pour faire simple, il suffit d'avoir des images qui par exemple s'appellent 'rubrique' auxquelles ont concatène la valeur de la rubrique, comme dans le contenu de <span id = "conteneur_photo"> (les images de mon exemple se trouvent donc dans un répertoire nommé "images")

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Document sans nom</title>
    <script type="text/javascript">
    <!--
    function Affiche_img(id_photo,nom_image,num_image)
    {
    	var id;
     
    	if (id = document.getElementById(id_photo))
    		{
    			if (typeof nom_image != 'undefined') 
    				{
    					if ( typeof num_image != 'undefined' && num_image != '')
    						{
    							var source_image = nom_image+num_image+'.jpg';
    							//alert(source_image);
    							id.src = source_image;	
     
    							id.style.display = 'inline';
    						}
    						else
    						{
    							id.style.display = 'none';
    						}
    				}
    		}	
    }		
    -->
    </script>
    <style type="text/css">
    <!--
    #formulaire {
    position:relative;
    width:500px;
    margin:auto;
    }
    #formulaire #photo, #formulaire #conteneur_photo {
    display:none;
    }
    -->
    </style>
    </head>
     
    <body>
    <div>
    <form name="formulaire" id="formulaire" method="post" action="#" >
    <div>
    <select class='adsmanager_required' name='category_choose' onchange='Affiche_img("photo","images/rubrique", this.value)'>
        <option>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>
     
    <img style="position:absolute; right:0; top:0"  id= "photo" src="" />
     
    <span id = "conteneur_photo"><img src="images/rubrique1.jpg" /><img src="images/rubrique2.jpg" /><img src="images/rubrique4.jpg" /><img src="images/rubrique65.jpg" /><img src="images/rubrique92.jpg" /><img src="images/rubrique151.jpg" /><img src="images/rubrique162.jpg" /><img src="images/rubrique173.jpg" /></span>
     
    </div>
    </form>
    </div>
    </body>
    </html>
    Bon bien sûr on pourrait faire autrement... avoir un tableau javascript de correspondance entre la valeur de la rubrique et l'image à afficher (ce qui laisserait par ailleurs plus de liberté dans le nommage des images). Cette dernière solution serait surtout plus intéressante si tu affiche les options de ton select depuis une table de bdd, auquel cas la gestion du tableau de correspondance pourrait être automatisé. Sinon la première solution que j'ai donnée a l'avantage d'avoir à ne pas changer le code javascript en cas d'ajout d'une rubrique.

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Juillet 2010
    Messages
    19
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Juillet 2010
    Messages : 19
    Par défaut
    C'est vraiment plus clair désormais
    Merci l'équipe

    Mais y a-t-il une fonction switch ou autre pour que les images se remplacent ??

  7. #7
    Membre Expert
    Avatar de RomainVALERI
    Homme Profil pro
    POOête
    Inscrit en
    Avril 2008
    Messages
    2 652
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 48
    Localisation : France, Meurthe et Moselle (Lorraine)

    Informations professionnelles :
    Activité : POOête

    Informations forums :
    Inscription : Avril 2008
    Messages : 2 652
    Par défaut
    Mini correction mais qui a son importance
    Citation Envoyé par ABCIWEB Voir le message
    Code javascript : Sélectionner tout - Visualiser dans une fenêtre à part
    if (id == document.getElementById(id_photo))
    Citation Envoyé par amoric69
    Mais ya t-il une fonction switch ou autre pour que les images se remplacent ??
    Avec la proposition de ABCIWEB (après correction) ça devrait le faire très bien à chaque fois que l'utilisateur change la valeur du select

  8. #8
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 202
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 202
    Par défaut
    Citation Envoyé par ABCIWEB Voir le message
    Bon bien sûr on pourrait faire autrement... avoir un tableau javascript de correspondance entre la valeur de la rubrique et l'image à afficher (ce qui laisserait par ailleurs plus de liberté dans le nommage des images).....
    on peut également ce servir des ID des options pour stocker le nom des images à afficher
    Voir l'exemple sur ce post

Discussions similaires

  1. Formulaire HTML et Javascript
    Par grandid8 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 14/04/2013, 21h06
  2. formulaire html validation javascript
    Par bodet dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 21/06/2008, 18h56
  3. Validation d'un formulaire HTML en javascript
    Par AliJava dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 26/12/2007, 17h02
  4. javascript pour récuperer les valeurs d'un formulaire html
    Par BetterWorld dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 18/05/2007, 12h09
  5. Réponses: 3
    Dernier message: 01/03/2007, 09h08

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo