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

**princesse95** · 08/03/2010, 14h57

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 :

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

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

**andry.aime** · 09/03/2010, 06h28

Bonjour princesse95

D'où viennent les informations à afficher?
Sont-elles statiques ou dynamiques?

**princesse95** · 09/03/2010, 11h03

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

**andry.aime** · 09/03/2010, 11h16

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"

**princesse95** · 09/03/2010, 11h32

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

**andry.aime** · 09/03/2010, 11h40

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

.

Code javascript :

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

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 HTML :

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

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

**princesse95** · 09/03/2010, 11h59

Merci je vais essayer de regarder ça et de faire avancer mon projet.

**princesse95** · 09/03/2010, 14h01

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?

**andry.aime** · 09/03/2010, 14h12

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é.

**princesse95** · 09/03/2010, 14h52

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 :

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

**vermine** · 09/03/2010, 14h55

Bonjour,

Oui, vous avez oublié le

Code :

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

1
2
 
 style="display:none"

sur le div2.

**princesse95** · 09/03/2010, 15h18

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

**princesse95** · 09/03/2010, 15h22

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 :

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

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

**vermine** · 10/03/2010, 07h53

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 :

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

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 :

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

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

**princesse95** · 16/03/2010, 10h56

Ç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

**vermine** · 16/03/2010, 11h09

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 :

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
 
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";
     }
}

**princesse95** · 16/03/2010, 11h27

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?

**princesse95** · 16/03/2010, 11h32

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 :

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

**vermine** · 16/03/2010, 11h37

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

Code :

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

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 :

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

1
2
3
4
 
<img src="button-sites.png" onclick="cache('div1','div2')">
 
<img src="button-bdd.png" onclick="cache('div1','div2')">

**princesse95** · 16/03/2010, 11h46

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

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

JavaScript

Discussions similaires

Partager

Partager