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

Farid63 · 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

Farid63 · 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

Citation:

Envoyé par ABCIWEB

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

NoSmoking · 02/02/2011, 11h33

Citation:

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

Citation:

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

Citation:

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

02/02/2011, 18h01	#14
amoric69 Invité de passage Inscription : juillet 2010 Messages : 18 Détails du profil Informations forums : Inscription : juillet 2010 Messages : 18 Points : 0 Points : 0	formulaire et liste déroulante Quelqu'un a une idée ? Je me sens un peu paumé la...
	00

01/02/2011, 12h31	#2
Farid63 Membre chevronné Farid Inscription : janvier 2008 Messages : 368 Détails du profil Informations personnelles : Nom : Farid Âge : 26 Localisation : France, Puy de Dôme (Auvergne) Informations forums : Inscription : janvier 2008 Messages : 368 Points : 684 Points : 684	Il te faudrait lancer une fonction sur l'évenement onchange de ton select.
	00

01/02/2011, 15h48	#4
Farid63 Membre chevronné Farid Inscription : janvier 2008 Messages : 368 Détails du profil Informations personnelles : Nom : Farid Âge : 26 Localisation : France, Puy de Dôme (Auvergne) Informations forums : Inscription : janvier 2008 Messages : 368 Points : 684 Points : 684	Tu utilise JQuery? Si c'est le cas, il y a exactement ce que tu cherche ici : http://api.jquery.com/change/.
	00

02/02/2011, 09h20	#6
amoric69 Invité de passage Inscription : juillet 2010 Messages : 18 Détails du profil Informations forums : Inscription : juillet 2010 Messages : 18 Points : 0 Points : 0	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 ??
	00

02/02/2011, 11h38	#9
amoric69 Invité de passage Inscription : juillet 2010 Messages : 18 Détails du profil Informations forums : Inscription : juillet 2010 Messages : 18 Points : 0 Points : 0	ok je vais test
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email