Donnez vie à vos documents numériques !
 

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

abracadabraPDF Forums PDF – Général Afficher et masquer des éléments d’un formulaire en cliquant sur une case à coch

  • Ce sujet est vide.
  • Créateur
    Sujet
  • #46231
    Mary31
    Participant

    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

Affichage de 13 réponses de 1 à 13 (sur un total de 13)
  • Auteur
    Réponses
  • #66985
    bebarth
    Maître des clés

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

    #66986
    Merlin
    Maître des clés

    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:

    #66987
    Mary31
    Participant

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

    #66988
    bebarth
    Maître des clés

    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:

    #66989
    Merlin
    Maître des clés

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

    #66990
    Mary31
    Participant

    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:

    #66991
    Mary31
    Participant

    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

    #66992
    Merlin
    Maître des clés

    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 )

    #66993
    Merlin
    Maître des clés

    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”) {

    #66994
    bebarth
    Maître des clés

    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:

    #66995
    Merlin
    Maître des clés

    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:

    #66996
    Mary31
    Participant

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

    #66997
    Merlin
    Maître des clés

    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:

Affichage de 13 réponses de 1 à 13 (sur un total de 13)
  • Vous devez être connecté pour répondre à ce sujet.