affichage d'un petit formulaire par un clique [Résolu]

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

Citation:

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.

sub-0 · 27/06/2009, 15h56

Merci ton exemple m'a beaucoup aidé

26/06/2009, 22h09	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 074 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 074 Points : 43 300 Points : 43 300	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" __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

26/06/2009, 22h49	#5
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 29 074 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 29 074 Points : 43 300 Points : 43 300	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 ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

26/06/2009, 22h15	#3
sub-0 Membre du Club Étudiant Inscription : novembre 2008 Messages : 183 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Étudiant Informations forums : Inscription : novembre 2008 Messages : 183 Points : 41 Points : 41	Merci pour la réponse , j'ai essayé avec display:block mais sans résultat
	00

27/06/2009, 15h56	#8
sub-0 Membre du Club Étudiant Inscription : novembre 2008 Messages : 183 Détails du profil Informations personnelles : Sexe : Informations professionnelles : Activité : Étudiant Informations forums : Inscription : novembre 2008 Messages : 183 Points : 41 Points : 41	Merci ton exemple m'a beaucoup aidé
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email