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 :

Ne pas imprimer les champs non répondus d'un formulaire


Sujet :

JavaScript

  1. #1
    Candidat au Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    mai 2016
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : Canada

    Informations professionnelles :
    Activité : Architecte de système d'information
    Secteur : Santé

    Informations forums :
    Inscription : mai 2016
    Messages : 7
    Points : 3
    Points
    3
    Par défaut Ne pas imprimer les champs non répondus d'un formulaire
    Bonjour,

    Je voudrais pouvoir n'imprimer que les champs (input) répondus d'un formulaire HTML. Le questionnaire contient quelques centaines de questions d'où l'idée d'éliminer les informations inutiles. Les champs input se distribuent soit :
    dans des blocs
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <div> <h3>(le titre de la section)</h3> <label><input radio ...>
    ou simplement des paragraphes <p> avec des questions.
    ou dans des listes non ordonnées tel que
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <ul>
      <h3>(le titre de la section)</h3>
      <li><label for="f267">bla bla bla</label>
                  <input type="checkbox" id="f267" name="f267" ..>
      <li><label for="f268">bla bla bla</label>
                  <input type="checkbox" id="f268" name="f268" ..>
    ou des input text
    etc.

    Si l'utilisateur ne répond pas à la question f268, il ne faut pas imprimer le champs input ni le label f268. L'élément <li> correspondant devrait devenir display:none pour le media print. L'impression se fait par le navigateur, pas du côté serveur.
    Dans le meilleur des mondes, lorsqu'aucun élément <li> d'une liste <ul> n'est répondu, il faudrait cacher la liste (l'élément <ul>) si possible. Évidemment, après impression, si l'utilisateur modifie une réponse dans le questionnaire, la réimpression devra tenir compte des changements.
    Je n'ai pas accès au code qui génère le questionnaire sur le serveur mais je peux modifier le CSS ou ajouter un JS. Il n'y a aucun moyen de pouvoir faire ce traitement en CSS, c'est pourquoi je m'adresse à ceux et celles qui connaissent bien le JS.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 934
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 934
    Points : 65 293
    Points
    65 293
    Billets dans le blog
    1
    Par défaut
    un simple script Jquery qui scanne les values des champs et leur attribues une class...


    dans ton css
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    @media print { 
    .noprint {display:none;}
    }

    et dans ton jquery tu boucles sur la collection des inputs
    tu vérifies si ils sont vides
    si oui tu attribues la class noprint sur le parent que tu veux supprimer
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Candidat au Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    mai 2016
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : Canada

    Informations professionnelles :
    Activité : Architecte de système d'information
    Secteur : Santé

    Informations forums :
    Inscription : mai 2016
    Messages : 7
    Points : 3
    Points
    3
    Par défaut
    salut,
    J'aurais préféré du JS pur sans librairie vu que ce un formulaire généré par un logiciel externe, mais oui j'avais pensé à cette solution. C'est juste un peu plus compliqué de charger une librairie pour un traitement qui est sans doute assez simple pour quiconque s'y connaît. Mais bref que ce soit en JS pur ou JQuery, je me demandais ce qui allait se passer après avoir ajouté la classe noprint : les champs vides ne s'impriment pas c'est certain mais qu'est-ce qui se passe si l'utilisateur continue d'éditer le formulaire après impression. Je présume qu'il faudrait enlever les classes noprint après impression si l'utilisateur décide d'ajouter une réponse.
    - Vu que je veux non seulement faire disparaître le input mais également son label, la classe noprint doit être attribuée à l'élément conteneur du label et de l'input.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 902
    Points
    38 902
    Par défaut
    Bonjour,
    si toutes tes constructions sont de faite de la même façon, du type
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <p><input type="checkbox"><label>Le texte</label></p>
    tu peux surement t'en sortir avec le CCS
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    @media print { 
      [type="checkbox"]:not(:checked),
      [type="checkbox"]:not(:checked) + label {
        display:none;
      }
    }

  5. #5
    Candidat au Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    mai 2016
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : Canada

    Informations professionnelles :
    Activité : Architecte de système d'information
    Secteur : Santé

    Informations forums :
    Inscription : mai 2016
    Messages : 7
    Points : 3
    Points
    3
    Par défaut
    Intéressant, mais ça ne fonctionne pas si le label précède l'input et je ne peux inverser le label avec l'input. Je ne crois pas que ça se fasse
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <p><label>Le texte</label><input type="checkbox"></p>
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    [type="checkbox"]:not(:checked),
      	[type="checkbox"]:not(:checked) + label,
    	label + [type="checkbox"]:not(:checked)   {  /* Non fonctionnel */
        display:none;
      }
    Finalement il y a un autre problème. Si tous les éléments ne sont pas répondus, il faudrait appliquer le display:none sur le parent UL de façon à cacher la section et le titre "Motif(s) de consultation" comme dans l'exemple suivant. C'est pourquoi je crois qu'il n'y a que le JS qui peut le faire.
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <ul>
    <h3>Motif(s) de consultation</h3>
    <li><label for="f274">Vertiges</label>
          <input type="checkbox" id="f274" name="f274" value="1" style="cursor:pointer;"></li>
    <li><label for="f275">Intolérance</label>
            <input type="checkbox" id="f275" name="f275" value="1" style="cursor:pointer;"></li>
    ...

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 902
    Points
    38 902
    Par défaut
    Intéressant, mais ça ne fonctionne pas si le label précède l'input et je ne peux inverser le label avec l'input.
    quand on veut on peut, dans ton cas il suffit de mettre un float:right sur l'<input>.


    Je ne crois pas que ça se fasse
    La plupart du temps c'est comme cela que c'est réalisé, la « checkBox » avant le texte.


    Si tous les éléments ne sont pas répondus, il faudrait appliquer le display:none sur le parent UL
    donc là retour au JavaScript, une simple comparaison entre le nombre d'<input type="chekbox"> et le nombre de checked et si différent on masque.
    Le script sera à déclencher sur l'événement beforeprint.

  7. #7
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 934
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 934
    Points : 65 293
    Points
    65 293
    Billets dans le blog
    1
    Par défaut
    Quand je proposais JQuery ... c'est tout aussi facilement réalisable en js pur ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  8. #8
    Membre actif
    Homme Profil pro
    OoW
    Inscrit en
    juin 2019
    Messages
    71
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 51
    Localisation : Ukraine

    Informations professionnelles :
    Activité : OoW

    Informations forums :
    Inscription : juin 2019
    Messages : 71
    Points : 247
    Points
    247
    Par défaut
    \ô/
    quoiqu'il arrive il est préférable que la construction html soit conforme, les surprises pouvant arrivées.

    Dans ton code
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <ul>
    <h3>Motif(s) de consultation</h3>
    <li><label for="f274">Vertiges</label>
          <input type="checkbox" id="f274" name="f274" value="1" style="cursor:pointer;"></li>
    H3 ne peut pas être enfant direct de UL.

  9. #9
    Candidat au Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    mai 2016
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : Canada

    Informations professionnelles :
    Activité : Architecte de système d'information
    Secteur : Santé

    Informations forums :
    Inscription : mai 2016
    Messages : 7
    Points : 3
    Points
    3
    Par défaut
    OK, j'ai vu les specs pour ul-li. Je n'ai qu'à inclure le texte de h3 dans un premier li sans h3 que je styliserai par
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    li:first-child {font-weight etc.}

  10. #10
    Candidat au Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    mai 2016
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : Canada

    Informations professionnelles :
    Activité : Architecte de système d'information
    Secteur : Santé

    Informations forums :
    Inscription : mai 2016
    Messages : 7
    Points : 3
    Points
    3
    Par défaut
    Citation Envoyé par NoSmoking Voir le message
    quand on veut on peut, ...
    Je ne suis pas ferré en Javascript mais je vais essayer de le résoudre.

  11. #11
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 902
    Points
    38 902
    Par défaut
    Citation Envoyé par PierreVt
    OK, j'ai vu les specs pour ul-li. Je n'ai qu'à inclure le texte de h3 dans un premier li sans h3 que je styliserai par
    Sémantiquement parlant c'est pas des plus top

    Autant partir sur :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <section>
      <h2>Motif(s) de consultation</h2>
      <ul>
        <li>
          <label for="f274">Vertiges</label>
          <input type="checkbox" id="f274" name="f274" value="1" style="cursor:pointer;">
        </li>
        <!-- la suite -->
      </ul>
    </section>
    et masquer la <section> en lui affectant la classe noprint.


    Citation Envoyé par PierreVt
    Je ne suis pas ferré en Javascript mais je vais essayer de le résoudre.
    peut-être plutôt « féru », non !!!

    Pour t'aider, il existe node.querySelectorAll(selector).

  12. #12
    Candidat au Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    mai 2016
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : Canada

    Informations professionnelles :
    Activité : Architecte de système d'information
    Secteur : Santé

    Informations forums :
    Inscription : mai 2016
    Messages : 7
    Points : 3
    Points
    3
    Par défaut
    Dans mon cas, c'était vraiment « ferré ».
    Ferré : Avoir des connaissances sur un sujet : Être ferré en mathématiques.
    Je vais aller consulter ta référence.

    Le problème avec la forme que tu suggères est que lorsque tous le li sont "non répondus", je pouvais cacher la section et le titre directement par le parent ul. Avec ta suggestion le titre étant extérieur à la liste ul je devrai ajouter un niveau de bloc div pour chaque liste ul et remonter au div pour cacher le titre et la liste. Ouin! Si c'est vraiment ce qu'il faut faire, je peux le faire mais il me semble que ça alourdit la structure du HTML. Je ne sais pas ce qui est le pire des deux.
    Code html : 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
     
    <div>
     <div>  /* à ajouter pour cacher*/
      <h2>Motif(s) de consultation</h2>
      <ul>
        <li>
          <label for="f274">Vertiges</label>
          <input type="checkbox" id="f274" name="f274" value="1" style="cursor:pointer;">
        </li>
        <!-- la suite -->
      </ul>
     </div>  /* à ajouter */
     <div>  /* à ajouter pour cacher*/
     <h2>Problème(s) rencontré(s)</h2>
      <ul>
        <li>
          <label for="f300">en milieu bruyant</label>
          <input type="checkbox" id="f300" name="f300" value="1" style="cursor:pointer;">
        </li>
        <!-- la suite -->
      </ul>
     </div> /* à ajouter */
    </div>
    </section>

  13. #13
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 902
    Points
    38 902
    Par défaut
    Ferré : Avoir des connaissances sur un sujet : Être ferré en mathématiques.
    Ah ok, je l'avais compris dans le sens pas enthousiaste, pas amateur ...


    Avec ta suggestion le titre étant extérieur à la liste ul je devrai ajouter un niveau de bloc div pour chaque liste ul...
    ton document n'en est que mieux structuré, en découpant et mettant chaque liste dans un élément <section>.


    et remonter au div pour cacher le titre et la liste.
    Non tu caches la <section> et tout ce qui se trouvera à l'intérieur sera masqué.


    Exemple possible de code simple
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    window.addEventListener("beforeprint", () => {
      const lstULs = document.querySelectorAll("UL");
      lstULs.forEach((ul) => {
        const nombreCheckBox = ul.querySelectorAll("[type='checkbox']").length;
        const nombreChecked = ul.querySelectorAll(":checked").length;
        if (nombreCheckBox != nombreChecked) {
          ul.parentNode.classList.add("noprint");
        }
        else {
          ul.parentNode.classList.remove("noprint");
        }
      });
    });
    parentNode est l'élément <section>.


    Nota : Je m'interroge quand même sur le besoin que tous les « checkbox » soient cochés.

  14. #14
    Candidat au Club
    Homme Profil pro
    Architecte de système d'information
    Inscrit en
    mai 2016
    Messages
    7
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 65
    Localisation : Canada

    Informations professionnelles :
    Activité : Architecte de système d'information
    Secteur : Santé

    Informations forums :
    Inscription : mai 2016
    Messages : 7
    Points : 3
    Points
    3
    Par défaut
    Ok, rien de mieux qu'un exemple pour mieux se comprendre. À supposer une section avec un titre et trois choix:
    Code HTML : 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
    <div>  
      <h2>Motif(s) de consultation</h2>
      <ul>
        <li>
          <label for="f274">Vertiges</label>
          <input type="checkbox" id="f274" name="f274" value="1" style="cursor:pointer;">
        </li>
        <li>
          <label for="f275">Étourdissements</label>
          <input type="checkbox" id="f275" name="f275" value="1" style="cursor:pointer;">
        </li>
        <li>
          <label for="f276">Nausées</label>
          <input type="checkbox" id="f276" name="f276" value="1" style="cursor:pointer;">
        </li>
      </ul>
    </div>

    Si 'utilisateur coche f274 et f276, Ce qui sera imprimé sera
    Motif(s) de consultation : Vertiges; Nausées;
    li f275 sera caché
    Mais si l'utilisateur ne coche aucune case, même le titre Motif(s) de consultation doit être caché. Il faut cacher la section div au complet. On ne cache plus au niveau li, ni ul.
    On traite ainsi toutes les autres sections avec d'autres titres et d'autres choix.

  15. #15
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 902
    Points
    38 902
    Par défaut
    Dans ce cas, il te fait mixer les deux méthodes, masquage individuel, l'<input> plus le <label>, via le CSS et masquage global, la <div> parent, via le JavaScript.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 2
    Dernier message: 01/06/2016, 00h49
  2. [AC-2007] Ne pas imprimer les champs null
    Par toumack dans le forum IHM
    Réponses: 5
    Dernier message: 05/12/2009, 12h49
  3. Réponses: 8
    Dernier message: 21/08/2007, 17h07
  4. Réponses: 9
    Dernier message: 15/12/2005, 09h59
  5. Réponses: 3
    Dernier message: 14/03/2005, 19h02

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