affichage d'un petit formulaire par un clique

**sub-0** · 26/06/2009, 20h14

Salut

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

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

**SpaceFrog** · 26/06/2009, 22h09

visible :

Code :

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

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

pas visible

Code :

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

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

**sub-0** · 26/06/2009, 22h15

Merci pour la réponse

, j'ai essayé avec display:block mais sans résultat

**kernelfailure** · 26/06/2009, 22h37

Envoyé par sub-0

Merci pour la réponse

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

**SpaceFrog** · 26/06/2009, 22h49

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

+1000 pour les id identqiues ...

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

pour ce qui est de la modif dynamique de style ça passera si tous les point au dessus sont rectifiés ...

**sub-0** · 26/06/2009, 22h49

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?

**kernelfailure** · 27/06/2009, 00h56

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

Tu peux faire un truc comme ça :

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
 
<HTML>
 <HEAD>
	<style type="text/css">
		#dBox.show {display:inline-block}
		#dBox.hide {display:none}
	</style>
  <SCRIPT LANGUAGE="JavaScript">
  <!--
	function swap() {
		var bt = document.getElementById('bSwap');
		var bx = document.getElementById('dBox');
		if( bt.value == 'Show') {
			bx.setAttribute("class", "show");
			bt.value = 'Hide';
		} else {
			bx.setAttribute("class", "hide");
			bt.value = 'Show';
		}
		return true;
	}
  //-->
  </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.

affichage d'un petit formulaire par un clique

JavaScript

Vue hybride

Discussions similaires

Partager

Partager