Un lien où un texte s'affiche dessous après le clic

Version imprimable

26/07/2007, 16h11
brunoperel

Un lien où un texte s'affiche dessous après le clic

Bonjour,

En fait ce que je voudrais c'est par exemple le visiteur clic sur un lien nommé "Plus d'options >>" et un formulaire apparaît à l'endroit du lien qu'il y avait avant, et à la fin du formulaire il y a un lien "<< Moins d'options" et quand on clique dessus le formulaire s'efface... C'est possible ? Est-ce qu'il faut utiliser le javascript ?
Et aussi : est-ce que le PHP saura gérer le formulaire même si on l'a rempli puis qu'on a cliqué sur "Moins d'options" ?

Merci
26/07/2007, 16h57
titfab

Javascript

Oui, on peut faire ça en javascript.

Tu crée une <div> caché par défaut avec tes éléments supplémentaire de ton formulaire.

Sur le bouton "Plus" t'appelle une fonction javascript qui montre cette div, cache le bouton "Plus" et affiche le bouton "moins" (caché par défaut).

Le bouton moins appelle une autre fonction javascript qui fait exactement l'inverse.

Ensuite, ton formulaire contient un <input type="hidden"> dans lequel sera indiqué dans quel cas on est (formulaire + ou formulaire normal). Ce champ sera mis à jour dans les fonctions javascript appelées par les boutons.

A la reception du formulaire, tu n'aura qu'à regarder la valeur de cet input pour prendre en compte ou non les champs supplémentaires !! ...

Merci pour ta réponse,

Bon j'ai compris pour le lien de "Plus" je fais
Code:

1 2 <a href="" onmouseover="deplie()">Plus </a>
Et donc, après je crée 2 fonctions javascript comme ça :
Code:

1 2 3 4 5 6 7 8 9 10 function deplie() { <div style="visibility: visible;"> Blablabla</div> <a href="" onmouseover="plie()">Moins</a> } function plie() { <div style="visibility: hidden;"> </div> <a href="" onmouseover="deplie()">Plus </a> }
Ca a l'air bizarre... Comment l'interpréteur reconnait si c'est le même bloc DIV qu'on plie et déplie ?

Mélange ...

Tu as mélangé HTML et JavaScript.

Voici un exemple qui marche :

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
<html>
<head>
<script language="javascript">
function plus(){
 document.getElementById("divPlus").style.visibility="visible";
 document.getElementById("btnPlus").style.visibility="hidden";
 document.getElementById("plusmoins").value="plus";
}
function moins(){
 document.getElementById("divPlus").style.visibility="hidden";
 document.getElementById("btnPlus").style.visibility="visible";
 document.getElementById("plusmoins").value="moins";
}
</script>
</head>
<body>
<form name="monForm">
 Champs normal : <input type="text" name="monChamp"/>
 <input type="hidden" id="plusmoins" value="moins"/>
 
 <input type="button" id="btnPlus" value="Plus>>" onclick="plus()">
 <div id="divPlus" style="visibility:hidden">
  Champs supplémentaire : <input type="text" name="enPlus"/>
  <input type="button" onclick="moins()" value="<<Moins">
 </div>
</form>
</body>
</html>

27/07/2007, 16h55
brunoperel

Waou ! Merci beaucoup ! Ca marche terrible !