afficher des informations à l'aide de l'évenement "onclick" sur un bouton input

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour,

Je cherche à réaliser quelque chose de pas super compliqué; mais je suis pas développeuse du tout..
Donc au final je voudrais faire 2 boutons (je l'ai déjà cette page). Quand je clique sur un bouton, ça m'affiche plusieurs informations.
Quand je clique sur le deuxième bouton, ça doit m'afficher d'autres informations..

Je précise que ces informations ne sont pas saisies d'un formulaire.

En gros j'ai déjà ça :
Code:

1 2 3 4 5 6 7 <FORM action="outil.html" Method="POST"> <p> <input type="image" src="button-sites.png" alt="ok" onclick=je sais pas quoi mettre> <BR><BR> <input type="image" src="button-bdd.png" alt="ok"> </p> </FORM>
Par contre quand je clique sur le bouton, il faut que les informations s'affiche dans la page ou j'ai déjà les boutons mais genre plus à droite....

Les informations peuvent être par exemple des noms de films...

Pouvez-vous m'éclairer?
Merci

09/03/2010, 06h28
andry.aime

Bonjour princesse95 ;)
D'où viennent les informations à afficher?
Sont-elles statiques ou dynamiques?
09/03/2010, 11h03
princesse95

En fait les informations ne viennent pas d'une base ou de ce qu'un utilisateur aurait saisie. Ce sont des informations statiques que je vais moi même rentrer...
Elles ne changeront jamais
09/03/2010, 11h16
andry.aime

Re,
Tu peux les mettre dans des div cachés ensuite afficher selon le bouton cliqué en jouant sur l'attribut style.display="none" et style.display="block"
09/03/2010, 11h32
princesse95

Mon problème c'est que je ne vois pas comment afficher quelques choses quand je clique sur mon bouton.
J'arrive à afficher une fenetre style pop up mais je vois pas comment afficher des informations dans la même page..

Je suis pas très connaisseuse de php en fait...et j'ai beau parcourir des sites, je ne trouve malheureusement pas grand chose :(

Je sais que ça se joue dans onclick mais après pour quoi mettre dans cet évènement..je vois pas
Tu pourrais me donner quelques indications?

Merci pour ton aide

Re,
Un petit bout de code pour te donner des idées ;).

Code:

1
2
3
4
5
6
7
8
9
10
11
function cache(id)
{
  if(document.getElementById(id).style.display!="none")
     {
        document.getElementById(id).style.display="none";
      }
}
else
     {
        document.getElementById(id).style.display="block";
      }

Code:

1
2
3
4
<input type="button" value="afficher/cacher" onclick="cache('div1')" />
<div id="div1" style="display:none">DIV 1</div> <br/>
<input type="button" value="afficher/cacher" onclick="cache('div2')" />
<div id="div2">DIV 2</div> <br/>

09/03/2010, 11h59
princesse95

Merci je vais essayer de regarder ça et de faire avancer mon projet.
09/03/2010, 14h01
princesse95

Alors ce bout de code sert en fait à cacher ou afficher en fonction du bouton sur lequel je clique...
Par contre pour afficher des données quand je clique sur le bouton ça se fait dans la boucle du if?
09/03/2010, 14h12
andry.aime

Re,
if n'est pas une boucle, c'est une instruction conditionnelle ;).
Mets les données dans les div ensuite la fonction va les afficher selon le bouton cliqué.

adry.aime merci pour tes informations...Par contre dès le départ j'ai un ptit bug.... Il m'affiche test informations....Ajouter informations 2 et quand je clique sur le premier bouton il se passe rien... :(

En fait, faut vraiment que dès le départ je n'ai rien d'afficher sur ma page et quand seulement je clique sur un bouton, il affiche les informations rentrées dans le div..

J'aurai pas oublié quelque chose?

Merci
Code:

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 <html> <title> Test Outil </title> <head> <SCRIPT language="Javascript"> function cache(id) { if(document.getElementById(id).style.display!="none") { document.getElementById(id).style.display="none"; } } else { document.getElementById(id).style.display="block"; } </SCRIPT> </head> <body bgcolor="#D7E1DF"> <center>OUTIL GESTION </center> <BR><BR> <FORM id="bouton" name="bouton" action="outil.html" Method="POST" > <p> <input type="image" src="button-sites.png" value="afficher/cacher" onclick="cache('div1')" /> <div id="div1" style="display:none"> Test informations .....Ajouter informations 1 </div> <br/> <input type="image" src="button-bdd.png" name="bdd" value="afficher/cacher" onclick="cache('div2')"/> <div id="div2"> Test informations .....Ajouter informations 2 </div> <br/> </p> </FORM> </body> </html>

09/03/2010, 14h55
vermine
Bonjour,

Oui, vous avez oublié le
Code:

1 2 style="display:none"
sur le div2.
09/03/2010, 15h18
princesse95

Effectivement..mais par contre quand je clique sur les boutons il ne se passe rien...

J'ai déjà modifié un truc..vu que dans mon cas mes buttons sont des images j'ai enlevé le value="" qui du coup sert à rien ..

Donc j'ai :

Code:

1
2
3
4
5
6
7
8
<FORM id="bouton" name="bouton" action="outil.html" Method="POST" >
<p>
<input type="image" src="button-sites.png" onclick="cache('div1')" />
<div id="div1" style="display:none"> Test informations .....Ajouter informations 1 </div> <br/>
 
<input type="image" src="button-bdd.png" name="bdd" onclick="cache('div2')"/>
<div id="div2" style="display:none"> Test informations .....Ajouter informations 2 </div> <br/>
</p>

Mais ça ne fonctionne quand même pas :(

Il y a plusieurs choses. D'abord, une accolade est mal placée dans la fonction cache. En rouge, la mauvaise place actuelle. En vert, la place qu'il faut:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function cache(id) { if(document.getElementById(id).style.display!="none") { document.getElementById(id).style.display="none"; } } else { document.getElementById(id).style.display="block"; } }
Après cela, vous utilisez des input type image. Ils font un submit de votre formulaire donc votre code Javascript ne sera pas exécuté ou du moins vous ne verrez pas le résultat car la page est rechargée avec ses valeurs initiales; c'est-à-dire celles de cacher les div.
Utilisez plutôt des <img>:
Code:

1 2 <img src="button-sites.png" onclick="cache('div1')">

16/03/2010, 10h56
princesse95

Ça fonctionne mieux effectivement..merci beaucoup

Par contre autre question..quand je clique sur le premier bouton ça doit m'afficher les informations, quand je clique sur le bouton 2 les information du bouton 2 s'affiche mais celle du bouton 1 doivent disparaitre...

Cela n'est pas le cas..
Là ça fait :
--> je clique sur bouton 1 == ça m'affiche les informations 1
--> je clique sur bouton 2 == ça m'affiche les informations 2 mais les informations du bouton 1 disparaissent pas

Je dois recliquer sur chaque bouton pour que les informations propre à chaque bouton disparaissent

Oui, la fonction est la plus générique possible. Mais tout dépend de votre utilisation, évidemment. Vous allez devoir modifier la fonction et/ou son appel. Combien de div utilisez-vous vraiment ? Si il n'y a effectivement que deux div, alors vous pouvez faire qqch du style:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 cache("div1", "div2"); function cache(id1, id2) { if(document.getElementById(id1).style.display!="none") { document.getElementById(id1).style.display="none"; document.getElementById(id2).style.display="block"; } else { document.getElementById(id2).style.display="none"; document.getElementById(id1).style.display="block"; } }

16/03/2010, 11h27
princesse95

Là par contre quand je clique il ne se passe plus rien :(
Je suis désolée je suis pas très douée en développement..

Ce n'est pas la propriété block qui pose problème?

Je pense que mon code pose problème hors de la fonction js..

au niveau du div dans le html n'y a t-il pas quelque chose à rajouter?

Code:

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
<html>
<title> Test Outil </title>
<head>
<SCRIPT language="Javascript">
 
cache("div1", "div2");
 
function cache(id1, id2)
{
    if(document.getElementById(id1).style.display!="none")
    {
        document.getElementById(id1).style.display="none";
        document.getElementById(id2).style.display="block";
    }
 
    else
    {
        document.getElementById(id2).style.display="none";
        document.getElementById(id1).style.display="block";
     }
}
 
</SCRIPT>
</head>
<body bgcolor="#D7E1DF">
<center>OUTIL TEST1</center>
<BR><BR>
 
<FORM id="bouton" name="bouton" action="outil.html" Method="POST" >
<p>
<img src="button-sites.png" onclick="cache('div1')">
 
<div id="div1"> Test informations .....Ajouter informations 1 </div> <br/>
 
<img src="button-bdd.png" onclick="cache('div2')">
 
<div id="div2"> Test informations .....Ajouter informations 2 </div> <br/>
</p>
 
</FORM>
 
 
</body>
</html>

16/03/2010, 11h37
vermine

Hihi
Oui, pardon, j'ai donné l'appel de la fonction
Code:

1 2 cache("div1", "div2");
au dessus de la fonction pour vous montrer un exemple d'appel. Il faut enlever cette ligne et modifier les deux onclick:
Code:

1 2 3 4 <img src="button-sites.png" onclick="cache('div1','div2')"> <img src="button-bdd.png" onclick="cache('div1','div2')">
16/03/2010, 11h46
princesse95

Merci beaucoup, ça fonctionne même si pas complètement.

Quelle est la méthode pour faire réagir le bouton2? Je m'explique..
Le bouton 1 gère tout en fait. Quand je clique une première fois sur le bouton 1 il me liste les informations 1 ...
quand je clique une deuxième fois sur le bouton 1, il affiche les info2 et fait disparaitre les info 1..

De même, quand je lance ma page, j'ai déjà les informations d'afficher avec les boutons... Comment remédier à tout cela?

Encore merci

Voir 40 message(s) de cette discussion en une page