Montrer/Cacher un formulaire dans un fieldset

Salut à tous,

J'essaie de montrer/cacher mon formulaire qui se trouve dans un fieldset et ça ne fonctionne pas.

Code:

---

1 2 3 4 5 6 7

<fieldset> <a href="javascript:void(0)" onClick="javascript:setVisible('form_maj_comm')">Modifier le commentaire</a><? //Formulaire de modification?> <div id="form_maj_comm" class="hidden"> <form action="index.php" method="get"> //(...)

---

J'ai essayé d'extraire la div du fieldset et dans ce cas, ça fonctionne.

Code:

---

1 2 3 4 5 6 7 8 9

//Formulaire de modification?> <div id="form_maj_comm" class="hidden"> <form action="index.php" method="get"> //(...)</form></div> <fieldset> <a href="javascript:void(0)" onClick="javascript:setVisible('form_maj_comm')">Modifier le commentaire</a><? //(...)

---

J'en conclus, que le problème vient que ma div se trouve dans mon fieldset. Qui peut me dire pourquoi?

Merci d'avance!

Bonjour,

Citation:

---

Envoyé par Goupo

Qui peut me dire pourquoi?

---

Parce qu'un fieldset est censé être un élément de formulaire ... et non l'inverse ? :koi:

Ceci dit, il faudrait voir le contenu de setVisible() ...

... et pas de "javascript:" dans les évènements :evilred:

A+

Citation:

---

Envoyé par E.Bzz

Bonjour,
Parce qu'un fieldset est censé être un élément de formulaire ... et non l'inverse ? :koi:

---

Ah! Ben je l'apprends à l'instant. j'ai toujours fait :

Code:

---

<fieldset><form>(...)</form></fieldset>

---

:roll: Je vais devoir revoir mon code... #!@^: !!!

Citation:

---

Envoyé par E.Bzz

Ceci dit, il faudrait voir le contenu de setVisible() ...

---

La fonction setVisible, affiche bien les valeurs attendues dans mon alert, de plus je l'utilise ailleurs. Donc je suis certain qu'elle fonctionne. La voici quand même :

Code:

---

1 2 3 4 5 6 7 8 9 10

function setVisible(identifiant) {   if (document.getElementById(identifiant).className == "hidden") { document.getElementById(identifiant).className = "visible"; } else { document.getElementById(identifiant).className = "hidden"; }   alert(document.getElementById(identifiant).id + " " + document.getElementById(identifiant).className); }

---

Citation:

---

Envoyé par E.Bzz

... et pas de "javascript:" dans les évènements :evilred:

---

Ah bon? Pourquoi? Pardonne mon newbisme en Javascript...

Citation:

---

Envoyé par Goupo

Ah! Ben je l'apprends à l'instant. j'ai toujours fait :

Code:

---

<fieldset><form>(...)</form></fieldset>

---

:roll: Je vais devoir revoir mon code... #!@^: !!!

---

Pas forcément : ma remarque était "de principe" (un fieldset sert normalement à regrouper des éléments d'un formulaire), mais vu ton code, il n'y a effectivement pas de raison que ça perturbe :?
Peut être un autre problème ?

Citation:

---

Envoyé par Goupo

Ah bon? Pourquoi? Pardonne mon newbisme en Javascript...

---

Parce qu'on précise "javascript;" uniquement dans le href d'une balise <A> pour indiquer au nav qu'il ne va pas trouver une url, mais un code Javascript.
Un attribut de type évènement (onclick, onchange, on.....) ne peut contenir que du Javascript. Pas besoin donc, de lui préciser ;)
Mais à ta décharge, c'est une des erreurs les plus courantes ...
Pour faire appel à un JS à partir d'un lien, il vaut mieux utiliser

Code:

---

<a href="#" onClick="setVisible('form_maj_comm'); return false;">Modifier le commentaire</a>

---

Le "return false;" empêche le nav de faire appelle au href : le résultat est donc le même.
L'avantage (outre la syntaxe plus correcte), et de pouvoir quand même indiquer une url dans le href (sans qu'elle soit appelée lors du clic, donc), pour les problèmes de référencement de tes pages par les moteurs de recherche, par exemple ...

Sinon, pour ton problème d'afficher/masquer : tu as bien des class "visible" et "hidden" de définies dans ton CSS ?
Leur donner un nom moins équivoque (car il correspond à des valeurs de propriétés CSS) serait une bonne idée ;)

A+

Merci beaucoup pour ces bonnes pratiques Js!

Citation:

---

Envoyé par E.Bzz

Sinon, pour ton problème d'afficher/masquer : tu as bien des class "visible" et "hidden" de définies dans ton CSS ?
Leur donner un nom moins équivoque (car il correspond à des valeurs de propriétés CSS) serait une bonne idée ;)

---

Voici mes classes :

Code:

---

1 2 3 4 5 6 7

.hidden { display : none; } .visible { display : inline; }

---

J'ai tenté de les renommer en hide et show mais le problème est le même.

J'ai oublié de préciser une chose qui peut être importante. Mon fieldset est aussi .hidden et est affiché par le lien suivant :

Code:

---

1 2	<a href="javascript:void(0);" onClick="javascript:montreInfosDerRes('Der_<? print $numResultat;?>')"><img src='img/comm.PNG' /></a>

---

Code:

---

1 2	<fieldset id="Der_<? print $autres[$i][5];?>" class="hidden">

---

Citation:

---

Envoyé par Goupo

J'ai oublié de préciser une chose qui peut être importante. Mon fieldset est aussi .hidden et est affiché par le lien suivant :

Code:

---

1 2	<a href="javascript:void(0);" onClick="javascript:montreInfosDerRes('Der_<? print $numResultat;?>')"><img src='img/comm.PNG' /></a>

---

Code:

---

1 2	<fieldset id="Der_<? print $autres[$i][5];?>" class="hidden">

---

---

Effectivement, ça peut être le problème.
Si tu essayes d'afficher le form, mais que le fieldset qui le contient est caché, ton form passera bien en "visible" (en fait display:inline, mais le nom de ta class prête à confusion quand même), mais tu ne verras pas de changement à l'écran.
As-tu vérifier ça ?
Ce serait donc plus un problème de logique qu'un bug ...

A+

Citation:

---

Ce serait donc plus un problème de logique qu'un bug ...

---

Sur l'aspect logique, je pense être Ok : On ne peut demander à rendre visible le form que si le fieldset qui le contient est visible. En effet, le lien qui permet d'afficher le formulaire se trouve dans le fieldset. Donc, quand on demande à afficher le formulaire, c'est que l'on a au préalable affiché le fieldset.

J'ai testé, hier soir, le même système, mais avec des <div>. Ca marche parfaitement.

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<div id="Histo_<? print $autres[$i][0]; ?>" class="hidden" style="width: 100%;"> <div> <h3>Informations supplémentaires <? print $autres[$i][0]; ?> le <? print convertDate($autres[$i][1]);?></h3> </div> <div style="border: thin black dotted;"> <b><u>Requête</u> :</b> <? print $autres[$i][2]; ?><br /><br /> <b><u>Commentaire</u> :</b> <? print $autres[$i][3]; ?> <a href="#" onclick="setVisible('form_maj_<? print $autres[$i][0]; ?>'); return false;">Modif</a> </div>   <div id="form_maj_<? print $autres[$i][0]; ?>" class="hidden"> <form> <input type="textarea" name="majComm" value="<? print $autres[$i][3]; ?>" /> <input type="submit" value="Modifier" /> </form> </div> </div>

---

Je pense que les fieldset sont tout simplement moins souples, qu'ils ne sont pas faits pour contenir des <div> des <form> ou autres balises qui changent de classe etc...

Citation:

---

Envoyé par Goupo

En effet, le lien qui permet d'afficher le formulaire se trouve dans le fieldset. Donc, quand on demande à afficher le formulaire, c'est que l'on a au préalable affiché le fieldset.

---

:king:

Citation:

---

Envoyé par Goupo

Je pense que les fieldset ne sont tout simplement moins souples, pas faits pour contenir des <div> des <form> ou autres balises qui changent de classe etc...

---

C'est très possible. Personnellement, je ne les utilise que pour l'aspect présentation, et je ne les manipule pas via JS.
Pas confronté au problème, donc.

Faudrait confirmation de quelqu'un ayant plus l'habitude de les triturer via JS :mrgreen:

A+

merci E.Bzz.

Citation:

---

Citation:

---

Je pense que les fieldset ne sont tout simplement moins souples, pas faits pour contenir des <div> des <form> ou autres balises qui changent de classe etc...

---

C'est très possible. Personnellement, je ne les utilise que pour l'aspect présentation, et je ne les manipule pas via JS.
Pas confronté au problème, donc.

Faudrait confirmation de quelqu'un ayant plus l'habitude de les triturer via JS :mrgreen:

---

Personne pour approuver cette théorie? :(

Ma recherche sur Google me conduit à un autre post traitant également d'un problème <fieldset><div></div></fieldset> et se terminant également en queue de poisson...

Citation:

---

Envoyé par Goupo

Personne pour approuver cette théorie? :(

---

Patience ;)

De manière générale, mieux vaut utiliser les objets pour ce pour quoi ils sont prévus (ex : donner à un span le comportement d'un div grâce au CSS n'est pas une bonne idée non plus).

A+

Citation:

---

Envoyé par E.Bzz

De manière générale, mieux vaut utiliser les objets pour ce pour quoi ils sont prévus

---

Donc pour conclure ce post, je peux dire que si mon code ne fonctionne pas, ce n'est pas spécialement étonnant étant donné que les fieldset sont faits pour présenter des champs et non pas des div?

Ps: J'ai de toute manière remplacé mes fieldset par des div.

@+!

Citation:

---

Envoyé par Goupo

Donc pour conclure ce post, je peux dire que si mon code ne fonctionne pas, ce n'est pas spécialement étonnant étant donné que les fieldset sont faits pour présenter des champs et non pas des div?

---

Un peu prématuré d'e faire une "règle", mais c'est un constat, à défaut de meilleur explication :aie:

A+