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