Discussion :

[lnikolanta]

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 :

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

[MANU_2]

Si tu utilise des input :

Code :

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

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

[lnikolanta]

ok merci, je vais essayer ça...

[MANU_2]

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

[fred777888999]

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

Code :

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

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.

[lnikolanta]

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

Merci vraiment beaucoup...

[lnikolanta]

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 :

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

[MANU_2]

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

dans le else, met elem et non elem2.

[fred777888999]

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 :

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

[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 ;-)

[MANU_2]

Aller Fred, fais lui son site ...

[fred777888999]

Ben tu peux mettre strictement ce que tu veux dans le div non ?
++
Fred.

[lnikolanta]

ok, c'est bon
Merci beaucoup ...
j'ai pu pas mal avancer gràce à vous...

[MANU_2]

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

Surtout à Fred

[fred777888999]

Np, un p'tit click sur (a vot bon coeur m'sieur dame) et on sera encore plus contents
++
Fred.

[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

[fred777888999]

ty lui met un style avec la visibility a hidden directement comme suit :

Code :

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

1
2
 
<div ... style="{visibility:hidden;}">

sur ce bon WE
Fred

[lnikolanta]

Merci encore beaucoup