rendre visible des champs de texte

Version imprimable

Bonjour,
j'ai trouvé un code permettant de rendre visible des labels se trouvant à côté de champ de texte, mais mon but à moi est de lorsque je clique sur un lien, rendre mon champ login et le label login visible et idem pour le pass.

je vous montre le code que j'ai trouvé...
je suis dsl mais je ne connais vraiment pas le javascript.

Merci de votre aide

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
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<form>
  <input type="text" onFocus="montre('txtNom')" onBlur="cache('txtNom')">
  <span id="txtNom" style="visibility: hidden;">Mettez votre nom</span><br>
 
  <input type="text" onFocus="montre('txtPrenom')" onBlur="cache('txtPrenom')">
  <span id="txtPrenom" style="visibility: hidden;">Mettez votre prénom</span><br>
 
  <input type="text" onFocus="montre('txtAge')" onBlur="cache('txtAge')">
  <span id="txtAge" style="visibility: hidden;">Mettez votre âge</span><br>
</form>
 
<script>
function montre(object)
  {
  if (document.layers && document.layers[object])
    {
    document.layers[object].visibility = 'visible';
    }
  else if (document.all)
    {
    document.all[object].style.visibility = 'visible';
    document.all[object].style.zIndex = 100;
    }
  else if (document.getElementById)
    {
    document.getElementById(object).style.visibility = 'visible';     document.getElementById(object).style.zIndex = 100;
    }
  }
 
function cache(object)
  {
  if (document.layers && document.layers[object])
    {
    document.layers[object].visibility = 'hidden';
    }
  else if (document.all)
    {
    document.all[object].style.visibility = 'hidden';
    }
  else if (document.getElementById)
    {
    document.getElementById(object).style.visibility = 'hidden';
    }
  }
</script>

Si tu utilise des input :

Code:

1
2
3
 
document.nom_formu.nom_input.type = "texte";    // voir
document.nom_formu.nom_input.type = "hidden";  // invisible

Je l'ai fais et ça marche

16/09/2005, 14h53
lnikolanta

ok merci, je vais essayer ça...
16/09/2005, 16h05
MANU_2

J'ai l'impression que ça marche sous firefox et pas sous IE...

Mets des id a tes champs et utilise getElementById pour les reperer. Un exemple simple qui fonctionne ie et ff :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
function cacher(id) {
var elem = document.getElementById(id);
if ( elem.style.visibility == "hidden" ) {
elem.style.visibility="visible";
}
else {
elem.style.visibility="hidden";
}
}
</script>
<input id="toto"><a href="javascript:cacher('toto')">Cacher/Montrer</a>

++
Fred.

16/09/2005, 16h33
lnikolanta

impecable, c'est exactement ce que je voulais...

Merci vraiment beaucoup...

J'aimerais bien, qu'en cliquant sur un lien (cacher/montrer dans ton exemple et admin dans le mien). Deux champs disparaissent ainsi que deux labels de textes.j'ai essayé ça mais ça ne marche pas :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<script type="text/javascript">
function cacher(id,id2) {
var elem = document.getElementById(id);
var elem2 = document.getElementById(id2);
if ( elem.style.visibility == "hidden" ) {
elem.style.visibility="visible";
}
else {
elem2.style.visibility="hidden";
}
 
if ( elem2.style.visibility == "hidden" ) {
elem2.style.visibility="visible";
}
else {
elem2.style.visibility="hidden";
}
 
}
</script>
login : <input id="login"><a href="javascript:cacher('login','pass')">Admin</a>
<br>
pass : <input id="pass">

Merci encore

16/09/2005, 16h43
MANU_2

Citation:

if ( elem.style.visibility == "hidden" ) {
elem.style.visibility="visible";
}
else {
elem2.style.visibility="hidden";
}

dans le else, met elem et non elem2.

Le plus simple est quand meme de mettre tes champs dans un div (ou un span selon les besoins) et de gerer directement la visibilite de ces derniers. Un petit exemple avec un peu de css :

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
 
<html>
<head>
<style>
body ul {list-style: none;}
body ul li {display : block;}
body ul li label {width:100px; text-align:right;}
</style>
<script type="text/javascript">
function cacher(id) {
var elem = document.getElementById(id);
if ( elem.style.visibility == "hidden" ) {
elem.style.visibility="visible";
}
else {
elem.style.visibility="hidden";
}
}
</script>
</head>
<body>
<div id="identification">
<ul>
<li><label>login</label><input id="toto"></li>
<li><label>password</label><input id="toto"></li>
</ul>
</div>
<a href="javascript:cacher('identification')">Cacher/Montrer</a>
</body>
</html>

16/09/2005, 16h53
lnikolanta

impeccable...
et pour faire la même chose avec du texte ou une photo comment on fait stp ??
après j'arrête de t'embêter ;-)
16/09/2005, 16h54
MANU_2

Aller Fred, fais lui son site ... :D
16/09/2005, 16h55
fred777888999

Ben tu peux mettre strictement ce que tu veux dans le div non ? ;)
++
Fred.
16/09/2005, 16h57
lnikolanta

ok, c'est bon
Merci beaucoup ...
j'ai pu pas mal avancer gràce à vous...
16/09/2005, 16h58
MANU_2

Citation:

J'ai pu pas mal avancer gràce à vous...

Surtout à Fred :roll:
16/09/2005, 16h59
fred777888999

Np, un p'tit click sur :resolu: (a vot bon coeur m'sieur dame) et on sera encore plus contents :)
++
Fred.
16/09/2005, 17h11
lnikolanta

ok pas de soucis...
juste une dernière question...
comment faire pour que mon div soit caché dès le début du chargement de ma page ??

Merci
16/09/2005, 18h04
fred777888999
ty lui met un style avec la visibility a hidden directement comme suit :
Code:

1 2 <div ... style="{visibility:hidden;}">
sur ce bon WE
Fred
16/09/2005, 18h07
lnikolanta

Merci encore beaucoup