IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Montrer/Cacher un formulaire dans un fieldset


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éclairé Avatar de Goupo
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2006
    Messages
    505
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2006
    Messages : 505
    Par défaut 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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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!

  2. #2
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    Citation Envoyé par Goupo Voir le message
    Qui peut me dire pourquoi?
    Parce qu'un fieldset est censé être un élément de formulaire ... et non l'inverse ?

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

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

    A+

  3. #3
    Membre éclairé Avatar de Goupo
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2006
    Messages
    505
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2006
    Messages : 505
    Par défaut
    Citation Envoyé par E.Bzz Voir le message
    Bonjour,
    Parce qu'un fieldset est censé être un élément de formulaire ... et non l'inverse ?
    Ah! Ben je l'apprends à l'instant. j'ai toujours fait :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <fieldset><form>(...)</form></fieldset>
    Je vais devoir revoir mon code... #!@^: !!!

    Citation Envoyé par E.Bzz Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 Voir le message
    ... et pas de "javascript:" dans les évènements
    Ah bon? Pourquoi? Pardonne mon newbisme en Javascript...

  4. #4
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par Goupo Voir le message
    Ah! Ben je l'apprends à l'instant. j'ai toujours fait :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <fieldset><form>(...)</form></fieldset>
    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 Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    <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+

  5. #5
    Membre éclairé Avatar de Goupo
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2006
    Messages
    505
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2006
    Messages : 505
    Par défaut
    Merci beaucoup pour ces bonnes pratiques Js!

    Citation Envoyé par E.Bzz Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <a href="javascript:void(0);" onClick="javascript:montreInfosDerRes('Der_<? print $numResultat;?>')"><img src='img/comm.PNG' /></a>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <fieldset id="Der_<? print $autres[$i][5];?>" class="hidden">

  6. #6
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Citation Envoyé par Goupo Voir le message
    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 : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <a href="javascript:void(0);" onClick="javascript:montreInfosDerRes('Der_<? print $numResultat;?>')"><img src='img/comm.PNG' /></a>
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    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+

Discussions similaires

  1. Cacher un champs dans un formulaire en gardant sa valeur
    Par gRaNdLeMuRieN dans le forum Langage
    Réponses: 6
    Dernier message: 10/11/2011, 19h52
  2. Réponses: 3
    Dernier message: 22/12/2010, 17h26
  3. [AC-2007] Cacher un bouton dans un formulaire
    Par Oliv'83 dans le forum IHM
    Réponses: 2
    Dernier message: 19/09/2010, 10h28
  4. Réponses: 10
    Dernier message: 17/09/2010, 11h09
  5. montrer/cacher un bouton d'un formulaire
    Par Sh4dow49 dans le forum Général JavaScript
    Réponses: 27
    Dernier message: 15/07/2008, 19h31

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo