Discussion :

[PierreVt]

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.

[SpaceFrog]

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

[PierreVt]

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.

[NoSmoking]

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

[PierreVt]

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

[NoSmoking]

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.

[SpaceFrog]

Quand je proposais JQuery ... c'est tout aussi facilement réalisable en js pur ...

[Dave Hiock]

\ô/
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.

[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

Code CSS :

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

li:first-child {font-weight etc.}

[PierreVt]

quand on veut on peut, ...

Je ne suis pas ferré en Javascript mais je vais essayer de le résoudre.

[NoSmoking]

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.

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

[PierreVt]

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>

[NoSmoking]

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");
    }
  });
});

où parentNode est l'élément <section>.


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

[PierreVt]

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.

[NoSmoking]

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.