Afficher / cacher partie d'un formulaire

Version imprimable

Bonsoir, voilà je viens de créer un petit site web en html/php/css.

Je ne connais pas du tout le javascript, cependant j'ai trouvé sur le web une petite fonction pour afficher et cacher des infos.
Voilàa la fonction :
Code:

1 2 3 4 5 6 7 8 9 <script language="Javascript"> // La fonction qui affiche/masque l'élément function bascule(elem) { // Quel est l'état actuel ? etat=document.getElementById(elem).style.visibility; if(etat=="hidden"){document.getElementById(elem).style.visibility="visible";} else{document.getElementById(elem).style.visibility="hidden";} }
Partie à mettre dans le div :

Code:

style="visibility: hidden"

Bouton qui affiche/ cache le reste :

Code:

<input type="button" onClick="bascule('zoneBasse');" value="On/Off">

Cependant, moi je ne veux pas cacher un div entier mais une seul partie d'un formulaire .. En fait dans ma page principal j'ai un <div ... <?php include "..."; ?></div>, dans cette page include se trouve seulement un formulaire. Donc si je met le style=... dans le div, toute la partie sera cacher, où mettre le style=".." afin que ce ne soit pas tout le div qui soit pris en compte ?

Bout de code du formulaire :
Code:

1 2 3 4 5 6 7 8 9 echo "<input type='text' name='nomB' /><input type='image' name='envoyer' src='../images/b_modifier.jpg'><br/><br/>"; echo "Prenom du bénéficiaire : <br/>"; echo "<input type='text' name='prenomB' /><input type='image' name='envoyer' src='../images/b_modifier.jpg'><br/><br/>"; echo "Adresse : <br/>"; echo "<textarea name='adresse' cols='50' rows='2' ></textarea><input type='image' name='envoyer' src='../images/b_modifier.jpg'><br/><br/>"; echo "Téléphone fixe : <br/>"; echo "<input type='text' name='telF'/><input type='image' name='envoyer' src='../images/b_modifier.jpg'><br/><br/>"; echo "Téléphone portable : <br/>"; echo "<input type='text' name='telP'/><input type='image' name='envoyer' src='../images/b_modifier.jpg'><br/><br/>";
ps: c'est du php car j'ai besoin de récupérer des infos plus tard qui ne sont pas marqué actuellement.

Et donc j'aimerais juste cacher les input .. mais laisser tout les echos qui écrive juste du texte .. Je sais pas si c'est compréhensible ..

Merci

16/02/2010, 23h43
sebhm

il faut que tu mettes un ID à chaque element que tu veux masquer

Code:

<input ... id="tonid" ... />

et que tu utilise ta fonction javascript avec l'id en parametre, autant de fois que necessaire.

Tu peux regrouper des balises à masquer dans un meme div si elles sont consecutives

Bonjour,

Citation:

Et donc j'aimerais juste cacher les input

Code:

1
2
3
4
5
6
7
8
9
10
function bascule()
{
	var a = document.getElementsByTagName('input');
	for(var i=0; i<a.length; i++)
	{
		etat=document.getElementsByTagName('input')[i].style.display;
		if(etat=="none"){document.getElementsByTagName('input')[i].style.display="block";}
		else{document.getElementsByTagName('input')[i].style.display="none";}
	}
}

17/02/2010, 08h40
SpaceFrog

cf. FAQ
http://javascript.developpez.com/faq...SS#affichObjet
17/02/2010, 10h01
bob633

Citation:

Envoyé par sebhm

il faut que tu mettes un ID à chaque element que tu veux masquer

Code:

<input ... id="tonid" ... />

et que tu utilise ta fonction javascript avec l'id en parametre, autant de fois que necessaire.

Tu peux regrouper des balises à masquer dans un meme div si elles sont consecutives

D'accord merci, si je met le même id dans deux input différents qui sont à la suite, seul le premier se cache/affiche, pourquoi ?

andry.aime> Merci pour cette fonction, cependant je ne connais pas du tout javascript, comment utiliser cette fonction après ?

SpaceFrog> Idem, comment utiliser ces fonctions ?

Merci d'avance
17/02/2010, 11h40
andry.aime

Re,

Citation:

cependant je ne connais pas du tout javascript

Je te conseille de passer de faire un tour sur :
:arrow: les tutoriels
:arrow: la faq
17/02/2010, 11h46
SpaceFrog

Citation:

si je met le même id dans deux input différents qui sont à la suite, seul le premier se cache/affiche, pourquoi ?

parcequ'un identifiant doit être UNIQUE sur une page..
(sinon il n'identifie rien )

+1 Spaffy
C'est pour ça que j'ai utilisé getElementsByTagName mais il faut tout de même donner un id pour le div conteneur des inputs.

Code:

1
2
3
4
5
6
7
8
9
function bascule()
{
	for(var i=0; i<document.getElementById('idDuDiv').getElementsByTagName('input').length; i++)
	{
		etat=document.getElementById('idDuDiv').getElementsByTagName('input')[i].style.display;
		if(etat=="none"){document.getElementById('idDuDiv').getElementsByTagName('input')[i].style.display="block";}
		else{document.getElementById('idDuDiv').getElementsByTagName('input')[i].style.display="none";}
	}
}

Bon,
ben, suite à une autre discussion, j'ai fait ce petit bout de code à partir du tien

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 type="text/javascript">
function bascule()
{
        var a = document.getElementById('idDuDiv');
        for(var i=0; i<a.getElementsByTagName('input').length; i++)
        {
                etat=a.getElementsByTagName('input')[i].style.display;
                if(etat=="none"){a.getElementsByTagName('input')[i].style.display="inline";}
                else{a.getElementsByTagName('input')[i].style.display="none";}
        }
}
</script>
</head>
<body>
	<input type="button" onclick="bascule()" value="On/Off"/>
	<div id="idDuDiv">
	<input type="text"/>
	<input type="text"/>
	<input type="text"/>
	</div>
	<input type="text"/>
	<input type="text"/>
	<input type="text"/>
 
</body>
</html>

Tu n'as plus qu'à l'adapter.
A+.

17/02/2010, 13h38
bob633

merci pour vos réponses, sinon en fait, les deux input je les ai mis dans un <p></p> comme ça j'ai mis l'id dans le p et ça marche niquel. Je vais aller voir vos tutos quand même s'il y a une façon plus propre de faire ..

Merci !