Afficher et masquer des éléments d’un formulaire en cliquant sur une case à coch

[Mary31]

Bonjour,

J’ai parcouru plusieurs discussions au sujet de l’affichage dynamique d’un formulaire .pdf mais je n’ai malheureusement pas trouvé de sujet qui répondait précisément à mon besoin.
Je dois avouer que je me suis aussi perdue dans des réponses trop complexes au regard de mes faibles connaissances en langage html…

Voici ma problématique :

1- Je souhaite associer 3 éléments (2 zones texte + 1 liste déroulante) à une case à cocher. Je précise que ces trois éléments sont alignés
Quand la case est cochée : ces trois éléments disparaissent du formulaire
Quand la case est décochée : ces trois éléments réapparaissent
2- Cette association est répétée 3 fois dans mon formulaire. IDEALEMENT, dès lors que la case est cochée et que la ligne où figurent les éléments (associés à cette case) disparaît, je voudrais que cela fasse remonter les éléments situés en dessous pour ne pas laisser d’espace vide ou du moins que la page reste équilibrée dans sa présentation.

J’ai testé avec les actions proposées afficher/masquer de la case à cocher mais il semble qu’une fois masqués, les champs ne réapparaissent plus quand je clique à nouveau sur la case…
Et je n’ai pas trouvé d’action directe pour rendre l’affichage dynamique (c.a.d rééquilibrer la page au regard des éléments affichés)

Pensez-vous pouvoir m’aider ??? :doute:

un grand merci

Sujet

[bebarth]

bonjour,
Aurais-tu un fichier à partager, même si ce n’est pas ton fichier complet !
@+
:bonjour:

[Merlin]

Bonjour et bienvenue

– Afficher/masquer une rangée de champs est simple.
– Faire remonter les (données des) rangées inférieures quand on supprime une rangée supérieure demande un sérieux développement en JavaScript.
– En PDF l’unité de base c’est la page (fixe) : on ne peut pas réduire ou agrandir une page à la volée, donc quand on masque des champs ça laisse forcément un vide. Souvent on préfère juste les griser. (pour éviter les vides).
Par-contre on peut générer des pages supplémentaires, et les supprimer.

:Smiley15:

[Mary31]

Merci pour votre aide, voici mon formulaire incomplet, j’ai fait une capture d’écran

Cela se joue dans la partie “Expérience”. Y sont référencées 3 périodes. Si aucune affectation n’est à renseigner pour les périodes 1 et 2, le fait de cocher la case masque les champs à renseigner et, idéalement, fait remonter la ou les périodes où une affectation pourra être référencée pour éviter trop d’espace vide…

Mais pour répondre à Merlin, je me rends compte qu’il n’y a pas tant d’espace que cela …donc si le déplacement des parties est trop compliqué, je préfère privilégier mon premier besoin d’afficher et de masquer plusieurs champs à chaque que l’on clique sur la case correspondante

J’espère que mes éléments seront suffisants pour pouvoir me donner des conseils.

Merci !!!

Merci !!!

[bebarth]

bonjour,

– Faire remonter les (données des) rangées inférieures quand on supprime une rangée supérieure demande un sérieux développement en JavaScript.

Je te confirme que ce point nécessite une certaine connaissance en JavaScript et certainement quelques heures de développement.
Si tu veux essayer de comprendre ce qu’il faudrait faire, je te conseille de regarder ce post :
https://abracadabrapdf.net/forum/index.php/topic,3784.msg23506.html#msg23506
La copie d’écran n’est pas non plus très efficace pour résoudre les problèmes car pour ce cas, il est très difficile d’expliquer la solution…
Regarde déjà ce post !
@+
:bonjour:

[Merlin]

Script à placer en action “champ désactivé” dans la case à cocher :

if (event.value != “Off”){
this.getField(“champ1“).display = display.visible;
this.getField(“champ2“).display = display.visible;
this.getField(“champ3“).display = display.visible;
// etc.
}
else  {
this.getField(“champ1“).display = display.hidden;
this.getField(“champ2“).display = display.hidden;
this.getField(“champ3“).display = display.hidden;
// etc.
}

[Mary31]

Merci Merlin

voilà ce que j’ai placé en action “champ désactivé” dans la case à cocher :

if (event.value != “Off”) {
this.getField(“Text35”).display = display.visible;
this.getField(“Dropdown4”).display = display.visible;
this.getField(“Délégation/Quartier”).display = display.visible;
// etc.
}
else  {
this.getField(“Text35”).display = display.hidden;
this.getField(“Dropdown4”).display = display.hidden;
this.getField(“Délégation/Quartier”).display = display.hidden;
// etc.
}

résultat : rien…

on dirait qu’aucune connexion finalement ne se fait entre la case à cocher et les champs. Ai-je commis des erreurs d’écriture au niveau des champs, j’ai pourtant bien repris chaque nom de ces derniers ?

au-delà du script, faut-il que j’engage d’autres actions ? au niveau des autres propriété de la case à cocher ou des champs que je souhaite masquer et afficher

Dommage, je sens que l’on y est presque :Euuuh:

[Mary31]

Merci aussi à Bebarth,

Effectivement je laisse tomber la remontée des éléments du dessous en fonction de la disparition de champs.

L’important est de réussir à franchir la première étape qui est d’ afficher et masquer des champs en cochant une case

Bonne journée

[Merlin]

Peux tu partager ton fichier ?
Ou au moins juste les champs concernés, ce sera plus facile à comprendre.
(Voir : https://abracadabrapdf.net/forum/index.php/topic,2974.0.html )

[Merlin]

OTAN pour moi, je viens de percuter.  :oh:

Il faut placer le script en action “souris relevée” et modifier la première ligne ainsi :

if (event.target.value != “Off”) {

[bebarth]

bonjour,
J’avais répondu exactement la même chose ce matin sans vérifier, puis j’ai supprimé ma réponse car après vérification, si on ne clique pas autre part, l’état des champs ne changeait pas… voir fichier ci-joint.
Je pensais regarder plus tard pourquoi car je ne comprends pas !
J’ai donc plutôt mis le changement d’état en script de calcul des champs cibles.
@+
:bonjour:

[Merlin]

Oui, l’action “champ désactivé” n’est pas très utile pour les cases-à-cocher et les boutons-radio, qui n’ont pas non plus de “event.value”.
:geek:

[Mary31]

:bravo: :extra: :bravo:

Bravo, c’est magique !!!

J’ai juste inversé l’ordre du visible et hidden pour que cela colle vraiment à mon besoin…

if (event.target.value != “Off”) {
this.getField(“Text35”).display = display.hidden;
this.getField(“Dropdown4”).display = display.hidden;
this.getField(“Text70”).display = display.hidden;
// etc.

}
else  {
this.getField(“Text35”).display = display.visible;
this.getField(“Dropdown4”).display = display.visible;
this.getField(“Text70”).display = display.visible;
// etc.
}

encore merci pour votre aide à tous les deux :soleil:

[Merlin]

Merci

J’ai juste inversé l’ordre du visible et hidden pour que cela colle vraiment à mon besoin…

Tu aurais pu inverser la condition de départ :

if (event.target.value == “Off”) {

== : est égal à
!= : n’est pas égal à

:Smiley15:

[Auteur]

Réponses