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, 11h33

Envoyé par RomainVALERI

Mini correction mais qui a son importance

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

Non, il s'agit d'une affectation suivi du test, j'aurais plutôt écrit

Code :

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

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

ajout d'une paire de parenthèses

**amoric69** · 02/02/2011, 11h38

ok je vais test

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

Envoyé par NoSmoking

Non, il s'agit d'une affectation suivi du test, j'aurais plutôt écrit

Code :

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

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

ajout d'une paire de parenthèses

>>> lu trop vite

Au temps pour moi

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

**amoric69** · 02/02/2011, 13h47

J'ai fais comme ca :

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
	<script type="text/javascript">
 
		$(document).ready(function(){
			$("#category_choose").click(function(){
				$("#div_affich-0").html($(this).val()); 
 
 
				var tableauImg = new Array();
				tableauImg[1] = "normes_immo.jpg";
				tableauImg[2] = "3d-amoureux-content.gif";
				tableauImg[4] = "3d-bleu-fait-non.gif";
				tableauImg[65] = "3d-bombe-35.png";
				tableauImg[92] = "3d-bravo.gif";
				tableauImg[151] = "3d-brosse-ses-dents.gif";
				tableauImg[162] = "3d-casquette-applaudir.gif";
				tableauImg[173] = "3d-clavier-lunettes.gif";
 
				$("#div_affich-1").html("<img src='img/"+ tableauImg[$(this).val()] +"' alt='' />");
 
			});
		});
	</script>
 
 
<div id="img_immo">
</div>
	<select id="category_choose" class='adsmanager_required' name='category_choose'>
		<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>
 
    <div id="div_affich-0">
    </div>
 <div id="div_affich-1">
    </div>

**amoric69** · 02/02/2011, 14h39

Suite au précédent formulaire on peut pousser le vice un peu plus loin,

Admetons que cette liste déroulante affiche ses titres en allant les chercher dans une base de données,

le code nous donnerai (attention, je dis ça sans m'assurer que c'est juste, c'est uniquement pour favoriser l'échange, je suis d'ailleurs persuadé que c'est faux) :

Dans la page la liste déroulante est créé à partir d'une table dans la bdd.
La liste se présente comme ca

Code :

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

1
2
3
4
<?php
             $categorie = "SELECT id,name FROM jos_adsmanager_categories WHERE parent = 0";
             $res_cat = mysql_query($categorie);
?>

J'ai bien capté le principe qu'il va chercher les noms et ID dans la table "jos_adsmanager_categories" où la valeur parent est égale 0.

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)'>
            <?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>
 
            <div id="liste">            </div>

pour l'option value = -1 c'est ce qui est affiché dans la liste, ok. Ensuite il nous dit

Code :

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

1
2
3
4
while ($ligne = mysql_fetch_object($res_cat))
                {
                    echo '<option value="'.$ligne->id.'">'.$ligne->name.'</option>';
                }

Donc il sort la liste en piochant dans la bdd mais le truc c'est comment lui faire la fonction via des données contenues dans une bdd ?
J'ai pensé à faire ca mais je sais que c'est pas juste syntaxiquement parlant :

Code :

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

1
2
3
4
5
6
7
8
while ($ligne = mysql_fetch_object($res_cat))
                {
                    echo '<option value="'.$ligne->id.'">'.$ligne->name.'</option>';
 
                        if '<option value="'.$ligne->id.=1'">' {
                                echo 'images/images1.jpg'
                            }
                }

Sure que comme ca ne marchera pas mais j'en suis pas loin je sais...

Quelle l'écriture serai la plus correcte ?!

Merci

**amoric69** · 02/02/2011, 18h01

Quelqu'un a une idée ?
Je me sens un peu paumé la...

**ABCIWEB** · 02/02/2011, 18h08

Pour avoir quelque chose d'un peu logique il faudrait avoir un champ "vignette" ou "image" dans ta table "jos_adsmanager_categories", en plus des champs "id" et "name" qui si j'ai bien compris correspondent respectivement aux valeurs et aux libellés des options.

Ensuite tu crée les tableaux qui te seront utiles.

Donc typiquement pour ton code php.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$categorie = "SELECT id,name,vignette FROM jos_adsmanager_categories";
 
$ressource = mysql_query($categorie);
 
$tab_categorie = array();
 
while ($result = mysql_fetch_assoc($ressource))
{
 $tab_categorie['libelle'][$result['id']] = $result['name'];
 $tab_categorie['image'][$result['id']] = $result['vignette'];
}
 
// Encodage de tableau id => image au format javascript avec json_encode
$tab_javascript_image = isset($tab_categorie['image'])? json_encode($tab_categorie['image']) : null;

Pour lister tes options id => libelle dans le code html

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")'>
 
<option value="-1" selected="selected">Choisissez une rubrique</option>
 
<?php if (isset($tab_categorie['libelle']) && is_array($tab_categorie['libelle']))
{
 foreach ($tab_categorie['libelle'] as $key => $value)
echo '<option value="'.$key.'">'.$value.'</option><br />';
}
 
</select>

Et pour récupérer ton tableau id => image dans le code javascript

Code :

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

var tab_image = <?php echo isset($tab_javascript_image)?  $tab_javascript_image : 'Array()'; ?>;

Bon j'ai pas testé mais le principe est là.

Donc avec ce système tu n'as plus à toucher à ta page quand tu ajoute, supprime ou modifie des catégories. Tout se fait en fonction du contenu de la table de ta base de donnée et le code html et javascript s'adapte automatiquement. Et là ça commence à devenir intéressant

formulaire html et javascript

JavaScript

Discussions similaires

Partager

Partager