Fonction javascript afficher/cacher

Résolu

worstangel Messages postés 42 Date d'inscription mardi 21 février 2006 Statut Membre Dernière intervention 5 juillet 2006 - 1 mars 2006 à 10:56
PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 - 2 mars 2006 à 08:11

A voir également:

Fonction javascript afficher/cacher
Récupérer données json (javascript) - Conseils pratiques -Javascript
Afficher un tableau php en html - Conseils pratiques -PHP
Javascript poo - Conseils pratiques -Javascript
Base de données javascript - Conseils pratiques -Javascript
Fonction calcul somme javascript ✓ - Forum Flash

14 réponses

Réponse 1 / 14

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
1 mars 2006 à 13:29

Bonjour,
pas sûr d'avoir compris ce qu'il faut faire...
s'il s'agit de montrer Colo1 à 8 en fonction du choix
dans le select, un ch'tit exemple :
( tous les tests semblent inutiles ... )

<html>
<head>
<title>test</title>
<script language="JavaScript">
var prec=false;
function afficherAutre(sel)
{
if ( prec )
{
prec.style.display="none";
}
prec=document.getElementById(sel[sel.selectedIndex].text);
prec.style.display="block";
document.getElementById("valider").style.display="block";
}
</script>
</head>

<form name="form1" method="post" action="">
Choisissez une colonie :
<select name="liste" onChange="afficherAutre(this)">
<option value=0>Choisissez</option>
<option >colo1</option>
<option >colo2</option>
<option >colo3</option>
<option >colo4</option>
<option >colo5</option>
<option >colo6</option>
<option >colo7</option>
<option >colo8</option>
</select>

Colo1 - Nom : Coordonnées :,
Colo2 - Nom : Coordonnées :,
Colo3 - Nom : Coordonnées :,
Colo4 - Nom : Coordonnées :,
Colo5 - Nom : Coordonnées :,
Colo6 - Nom : Coordonnées :,
Colo7 - Nom : Coordonnées :,
Colo8 - Nom : Coordonnées :,

</form>

</html>

mais je doute...
ne serait-ce pas ajouter des zones où l'on peut saisir
des noms, au fur et à mesure, en dynamique ?
ce serait bien de formuler ce qu'il faut faire.

Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>

Réponse 2 / 14

worstangel Messages postés 42 Date d'inscription mardi 21 février 2006 Statut Membre Dernière intervention 5 juillet 2006
1 mars 2006 à 10:57

(excusez moi je ne sais pas pourquoi il n'a rien écris...)

Salut, Je voudrais votre aide sur ce script car il ne fonctionne pas et malheureusement je ne suis même pas débutant en javascript je m'y suis improvisé ^^ ...

<html>
<head>
<title>test</title>
<script language="JavaScript">
function afficherAutre() {
var a = document.getElementById("colo1");
var b = document.getElementById("colo2");
var c = document.getElementById("colo3");
var d = document.getElementById("colo4");
var e = document.getElementById("colo5");
var f = document.getElementById("colo6");
var g = document.getElementById("colo7");
var h = document.getElementById("colo8");
var i = document.getElementById("valider");

if (document.form1.liste.value == 1)
{
if (a.style.display == "none")

a.style.display = "block";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";

}
if (document.form1.liste.value == 2)
{
if (b.style.display == "none")

a.style.display = "none";
b.style.display = "block";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";

}
if (document.form1.liste.value == 3)
{
if (c.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "block";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";

}
if (document.form1.liste.value == 4)
{
if (d.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "block";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";

}
if (document.form1.liste.value == 5)
{
if (e.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "block";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";

}
if (document.form1.liste.value == 6)
{
if (f.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "block";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";

}
if (document.form1.liste.value == 7)
{
if (g.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "block";
h.style.display = "none";
i.style.display = "none";

}
if (document.form1.liste.value == 8)
{
if (h.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "block";
i.style.display = "none";

}
if (document.form1.liste.value == 9)
{
if (i.style.display == "none")

a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "block";

}
else
{
a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";
}
</script>
</head>

<form name="form1" method="post" action="">
Choisissez une colonie :
<select name="liste" onChange="afficherAutre()">
<option value=0>Choisissez</option>

<option value=1 >colo1</option>

<option value=2 >colo2</option>

<option value=3 >colo3</option>

<option value=4 >colo4</option>

<option value=5 >colo5</option>

<option value=6 >colo6</option>

<option value=7 >colo7</option>

<option value=8 >colo8</option>

<option value=9 >Valider</option>
</select>

Colo1 - Nom : Coordonnées :,

Colo2 - Nom : Coordonnées :,

Colo3 - Nom : Coordonnées :,

Colo4 - Nom : Coordonnées :,

Colo5 - Nom : Coordonnées :,

Colo6 - Nom : Coordonnées :,

Colo7 - Nom : Coordonnées :,

Colo8 - Nom : Coordonnées :,

</form>

</html>
Merci à tous

------------------------------------------------------------------------
Bientôt maître d'une nouvelle ère de RPG.

Réponse 3 / 14

worstangel Messages postés 42 Date d'inscription mardi 21 février 2006 Statut Membre Dernière intervention 5 juillet 2006
1 mars 2006 à 13:41

Oui c'était bien ça merci beaucoup ^^
la prochaine fois j'éssaierais d'être plus précis ...
--------------------------------------------------
Bientôt maître d'une nouvelle ère de RPG.

Réponse 4 / 14

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
1 mars 2006 à 13:53

B
onjour...

Il manque déjà } en fin de script mais bon...

la partie suivante...

if (document.form1.liste.value == 9){
....
}
else{
a.style.display = "none";
b.style.display = "none";
c.style.display = "none";
d.style.display = "none";
e.style.display = "none";
f.style.display = "none";
g.style.display = "none";
h.style.display = "none";
i.style.display = "none";
}
annule tout si le choix n'est pas 9 donc pas terrible....

Ca c'était pour comprendre le piège des if à répétition pour un code plus propre voir ci dessus le code de l'excellent BULTEZ...

;0)

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question

Réponse 5 / 14

worstangel Messages postés 42 Date d'inscription mardi 21 février 2006 Statut Membre Dernière intervention 5 juillet 2006
1 mars 2006 à 13:59

j'vais faire mon chi*ur ^^
mais en faites je voulais que ça m'affiche plusieurs blocks en même temps comme cela :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Ennemis</title>

<script language="JavaScript">
var prec=false;
function afficherAutre(sel)
{
if ( prec )
{
prec.style.display="none";
}
prec=document.getElementById(sel[sel.selectedIndex].text);
prec.style.display="block";
document.getElementById("valider").style.display="block";
}
</script>

</head>
<form method="post">
Pseudo / alliance,
,
,
Univers : ,

----

Planètes.<select name="liste" onChange="afficherAutre(this)">
<option value=0>Choisissez</option>

<option>colo1</option>
<option>colo2</option>
<option>colo3</option>
<option>colo4</option>
<option>colo5</option>
<option>colo6</option>
<option>colo7</option>
<option>colo8</option> </select>,
PM - Nom :
Coordonnées :,

Colo1 - Nom :
Coordonnées :,

Colo2 - Nom :
Coordonnées :,

Colo3 - Nom :
Coordonnées :,

Colo4 - Nom :
Coordonnées :,

Colo5 - Nom :
Coordonnées :,

Colo6 - Nom :
Coordonnées :,

Colo7 - Nom :
Coordonnées :,

Colo8 - Nom :
Coordonnées :,

----

Lune,
,

,

,

,

,

,

,

,

,

----

Rapports espionnage,
<textarea cols="20" rows="7" name="rapport"></textarea>,

<textarea cols="20" rows="7" name="rapport1"></textarea>,

<textarea cols="20" rows="7" name="rapport2"></textarea>,

<textarea cols="20" rows="7" name="rapport3"></textarea>,

<textarea cols="20" rows="7" name="rapport4"></textarea>,

<textarea cols="20" rows="7" name="rapport5"></textarea>,

<textarea cols="20" rows="7" name="rapport6"></textarea>,

<textarea cols="20" rows="7" name="rapport7"></textarea>,

<textarea cols="20" rows="7" name="rapport8"></textarea>,

----

Commentaire : <textarea cols="50" rows="2" name="commentaire"></textarea>

</form>

</html>

Merci à tous ^^

Bientôt maître d'une nouvelle ère de RPG.

Réponse 6 / 14

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
1 mars 2006 à 15:52

à PetOleTeam :
vous en êtes un autre cher ami ( je parle d'excellent,
on devrait se dire ça plus souvent... )
c'est vrai qu'il y avait des erreurs de syntaxe dans
le script fourni et que j'aurais du les signaler. c'est fait.

à WorstAngel :
je suppose que ça veut dite que lorsqu'on affiche
colo# il faut aussi afficher rapport# ?

Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>

Réponse 7 / 14

worstangel Messages postés 42 Date d'inscription mardi 21 février 2006 Statut Membre Dernière intervention 5 juillet 2006
1 mars 2006 à 16:03

et bien en fait il faut que cela affiche les blocs [nom - coordonnées] [lune] et [rapport] selon le choix du SELECT ...
on choisi colo1 on affiche
<td id="colo1" style="display: none">Colo1 - Nom : Coordonnées :</td>
<td id="colo1" style="display: none"></td>
ET
<td id="colo1" style="display: none"><textarea cols="20" rows="7" name="rapport1"></textarea></td>
le tout dans le même tableau et à la droite de la colone PM......

---------------------------------------------------
Bientôt maître d'une nouvelle ère de RPG.

Réponse 8 / 14

worstangel Messages postés 42 Date d'inscription mardi 21 février 2006 Statut Membre Dernière intervention 5 juillet 2006
1 mars 2006 à 16:13

Faudrait-il mettre class à la place d'id ?...
(souvenir du CSS)
--------------------------------------------------
Bientôt maître d'une nouvelle ère de RPG.

Réponse 9 / 14

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
1 mars 2006 à 16:14

Bonjour,
alors, tel que c'est fait là :
soit ° mettre un id dans le tr et afficher/cacher ce tr ( cette ligne )
soit ° transmettre à la fonction un 2ème paramètre qui est le 2ème champ à cacher/montrer
soit ° transmettre à la fonction un n° # qui permettra de gérer colo# et rapport#
soit ° ... euh, c'est tout ce qui me vient pour l'instant...
il y a sûrement d'autres possibilités
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>

Réponse 10 / 14

worstangel Messages postés 42 Date d'inscription mardi 21 février 2006 Statut Membre Dernière intervention 5 juillet 2006
1 mars 2006 à 16:20

en fait c'est pas une ligne c'est une colone ce qui complique l'affaire ...
"soit ° transmettre à la fonction un 2ème paramètre qui est le 2ème champ à cacher/montrer"
je crois que cette option me convient mais il y a lune a afficher aussi ...
là je ne vois pas comment arranger ce code pour afficher les 3 autres

<script language="JavaScript">
var prec=false;
function afficherAutre(sel)
{
if ( prec )
{
prec.style.display="none";
}
prec=document.getElementById(sel[sel.selectedIndex].text);
prec.style.display="block";
}
</script>

----------------------------------------------------------------------------------
Bientôt maître d'une nouvelle ère de RPG.

Réponse 11 / 14

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
1 mars 2006 à 16:43

Bonjour,
on peut parfaitement cacher une colonne.

for (var l=0;l<tableau.rows.length;l++)
{
tableau.rows[l].cells[n° colonne à cacher].style.display="none";
}

Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>

Réponse 12 / 14

cs_bultez Messages postés 13615 Date d'inscription jeudi 13 février 2003 Statut Membre Dernière intervention 15 octobre 2013 30
1 mars 2006 à 16:47

mais pas sûr que ?.rows.length soit digéré par FF.
Cordialement. Bul. ~ Mon Site qu'il est à Moi ~<FO>
</FO></S< body>

Réponse 13 / 14

worstangel Messages postés 42 Date d'inscription mardi 21 février 2006 Statut Membre Dernière intervention 5 juillet 2006
1 mars 2006 à 16:50

Ben merci quand même je vais essayer de trouver quelqu'un qui pourrait me faire ce code ac rows.lenght ...

Merci encore ++

Réponse 14 / 14

PetoleTeam Messages postés 3426 Date d'inscription lundi 26 décembre 2005 Statut Membre Dernière intervention 14 janvier 2011 17
2 mars 2006 à 08:11

B
onjour...

Sorry mais je n'ai pas beaucoup de temps à consacrer à l'araignée..

Juste pour information table.rows.lenght est tout à fait accepté par FireFox...

Petit coup de PUB, pas l'anglais...

Va voir les sources de Pour tout savoir sur cela devrait surement t'aider dans tes recherches...

;0)

Discussions similaires

Calcul de somme dans un formulaire

[Javascript] Afficher une variable en temps réel

afficher un tableau en php

Partie entiére d'un nombre

remise a zero de fonction

Votre réponse

Discussions similaires