affichage d'un petit formulaire par un clique

Version imprimable

Salut :D,
Je suis un debutant en JS et je veux afficher un petit formulaire (label+zone text+bouton) si j'ai cliqué sur un autre bouton, j'ai essayé ce code mais ça marche pas :(.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<script type="text/javascript">
function affich(modif){
if(mdifpass.clicked){
document.getElementById("pp").style="display:";
document.getElementById("ll").style="display:";
document.getElementById("bb").style="display:";
 
}
}
 
</script>
-------------------
<form id="monForm" action="" method="POST" name="formulaire"><input type="submit" name="modif" value="Modifier" style="width:130px" onclick="affich(modif)" /> </form>
<form id="monForm" action="" method="POST" name="formulaire">
<p align="center">
<label for="form_pass" style="display:none" id="ll">Nouvel mot de passe : </label> 
 <input  name="mdifpass" id="pp"  type="text" style="display:none" /> <input type="submit"  style="display:none" id="bb" value="Valider"  /></p></form>

Merci d'avance pour l'aide :D

26/06/2009, 22h09
SpaceFrog

visible :

Code:

document.getElementById("pp").style.display="block"

pas visible

Code:

document.getElementById("pp").style.display="none"
26/06/2009, 22h15
sub-0

Merci pour la réponse :D, j'ai essayé avec display:block mais sans résultat :(
26/06/2009, 22h37
kernelfailure

Citation:

Envoyé par sub-0

Merci pour la réponse :D, j'ai essayé avec display:block mais sans résultat :(

Normal, l'attribut "style" a le dernier mot sur les CSS: Ils sont avec "display:none". Donc rien ne s'affichera.

Veilles aussi à avoir des IDs unique. Là tu as deux tags FORM avec le même id.
26/06/2009, 22h49
SpaceFrog

mdifpass.clicked ???
le seul element qui s'en rapproche est un input text qui est en display none au départ :aie:

+1000 pour les id identqiues ...:?

tu declenches une action sur un bouton submit .... 8O

pour ce qui est de la modif dynamique de style ça passera si tous les point au dessus sont rectifiés ...
26/06/2009, 22h49
sub-0

Justement, je veux que display:none devient display:block pour afficher les composants , pour les id des form c'est pour mon fichier CSS , je ne sais pas l'origine du problème?

Les IDs doivent être strictement unique. C'est une règle. Sinon ton document est invalide.

Tu peux faire un truc comme ça :
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 <HTML> <HEAD> <style type="text/css"> #dBox.show {display:inline-block} #dBox.hide {display:none} </style> <SCRIPT LANGUAGE="JavaScript">  </SCRIPT> </HEAD> <BODY> <FORM METHOD=POST ACTION=""> <div id="dBox" class="hide"><INPUT TYPE="text" NAME=""><INPUT TYPE="text" NAME=""></div> <input id="bSwap" type="button" onclick="return swap();" value="Show"> </FORM> </BODY> </HTML>
Ici, j'intercepte l'état de mon formulaire via l'attribut 'value' de mon bouton. Suivant le cas, je swap la class d'un div qui englobe les widgets. Ainsi, j'affiche ou non le contenu en un seul coup.
A la rigueur, j'aurais pu passer en paramètre à la fonction swap 'this.value', ce qui évitait à la fonction d'aller la chercher.

27/06/2009, 15h56
sub-0

Merci ton exemple m'a beaucoup aidé :mrgreen: