formulaire html et javascript

**amoric69** · 01/02/2011, 12h21

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

**FaridM** · 01/02/2011, 12h31

Il te faudrait lancer une fonction sur l'évenement onchange de ton select.

**amoric69** · 01/02/2011, 14h31

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

**FaridM** · 01/02/2011, 15h48

Tu utilise JQuery?

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

**ABCIWEB** · 01/02/2011, 17h46

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.

**amoric69** · 02/02/2011, 09h20

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 ??

**RomainVALERI** · 02/02/2011, 10h30

Mini correction mais qui a son importance

Envoyé par ABCIWEB

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

if (id == document.getElementById(id_photo))

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

**NoSmoking** · 02/02/2011, 13h13

Envoyé par ABCIWEB

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

formulaire html et javascript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager