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 :

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

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

pas visible

Code :

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 :

 
<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, 22h15	#3
sub-0 Membre du Club Date d'inscription: novembre 2008 Messages: 107	Merci pour la réponse , j'ai essayé avec display:block mais sans résultat

26/06/2009, 22h49	#6
sub-0 Membre du Club Date d'inscription: novembre 2008 Messages: 107	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?

27/06/2009, 15h56	#8
sub-0 Membre du Club Date d'inscription: novembre 2008 Messages: 107	Merci ton exemple m'a beaucoup aidé

		Forum des professionnels en informatique > Webmasters - Développement Web > JavaScript
affichage d'un petit formulaire par un clique

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