JavaScript formulaire afficher/masquer champs texte

[Stephanie_982]

Bonjour,

 

J’en suis à mes débuts avec le javascript.  J’ai créé un formulaire dans lequel j’ai trois cases à cocher. Lorsque je sélectionne chacune des cases, des champs distincts doivent s’afficher et se masquer lorsque je désélectionne. À la base j’avais utilisé des cases à cocher modifiées pour être utilisées comme des boutons radio pour ne pas qu’on puisse sélectionner simultanément plusieurs cases, mais ça posait problème car les champs texte initiaux ne se masquaient pas en changeant la sélection.

J’ai donc créé des cases à cocher qui me permettent sans problème d’afficher et de masquer les champs texte désignés, mais évidemment, maintenant le problème est que plusieurs cases peuvent être cochées simultanément, ce qui cause un casse-tête de champ qui s’affichent que je ne veux pas avoir.

 

Quelqu’un est en mesure de m’aiguiller sur la portion de script à modifier/ajouter ? Voir la portion correspondante en pièce jointe.

Mille mercis 🙂

Attachments:

You must be logged in to view attached files.

Sujet

[Merlin]

Bonjour et bienvenue

Ça serait plus facile si tu avais posté un exemple en PDF contenant les coches et les champs en question.

Il y a une erreur (que font tous les débutants) à ne pas commettre : il ne faut jamais éditer des scripts avec un traitement de texte (comme Word), il faut toujours utiliser un Éditeur de texte, comme BBEdit (Mac) ou NotePad (Windows).

Il est contre-productif de répéter la condition (if/else) pour chaque champ, une seule condition peut traiter plusieurs instructions afficher/masquer (ou autre). C’est à ça que servent les accolades.

Il est inutile de mettre “this” devant “event.target”.

En fait, pour agir comme des boutons-radio, il faut que les 3 cases à cocher aient toutes exactement le même nom avec chacune une valeur d’exportation différente. Et pour que ça fonctionne correctement il faut mettre le même script dans les trois cases.

Pour faire simple disons que la case 1 a une valeur d’exportation “1”, la case 2 a la valeur d’exportation “2” et la case 3 a la valeur d’exportation “3”.

Ce qui donnerait par exemple ce script à placer dans les 3 cases, en action Souris relevée :

 

// D'ABORD ON MASQUE TOUS LES CHAMPS
this.getField("Teste_PSA1").display=display.hidden;
this.getField("vict_pro_1_4").display=display.hidden;
this.getField("aucune_vict_pr_1_4").display=display.hidden;
this.getField("Texte_PSA3").display=display.hidden;
this.getField("une_vict_pr_3").display=display.hidden;
this.getField("vic_profil3").display=display.hidden;
this.getField("enfant_victime").display=display.hidden;
this.getField("enfant_victime1").display=display.hidden;
this.getField("autre_vic_case").display=display.hidden;
this.getField("Texte222").display=display.hidden;
this.getField("Texte223").display=display.hidden;
this.getField("Liste222").display=display.hidden;
this.getField("Liste223").display=display.hidden;
this.getField("Texte121").display=display.hidden;
this.getField("Texte122").display=display.hidden;
this.getField("Texte_PSA4").display=display.hidden;
this.getField("Texte_CETM2").display=display.hidden;
this.getField("typeverdict").display=display.hidden;
this.getField("Tx_SAS").display=display.hidden;

 

// ENSUITE ON AFFICHE CEUX QUI DOIVENT L'ÊTRE
if (event.target.value == 1)
{
this.getField("Teste_PSA1").display=display.visible;
this.getField("vict_pro_1_4").display=display.visible;
this.getField("aucune_vict_pr_1_4").display=display.visible;
}

else if (event.target.value == 2)
{
this.getField("Texte_PSA3").display=display.visible;
this.getField("une_vict_pr_3").display=display.visible;
this.getField("vic_profil3").display=display.visible;
this.getField("enfant_victime").display=display.visible;
this.getField("enfant_victime1").display=display.visible;
this.getField("autre_vic_case").display=display.visible;
this.getField("Texte222").display=display.visible;
this.getField("Texte223").display=display.visible;
this.getField("Liste222").display=display.visible;
this.getField("Liste223").display=display.visible;
this.getField("Texte121").display=display.visible;
this.getField("Texte122").display=display.visible;
}

else if (event.target.value == 3)
{
this.getField("Texte_PSA4").display=display.visible;
this.getField("Texte_CETM2").display=display.visible;
this.getField("typeverdict").display=display.visible;
this.getField("Tx_SAS").display=display.visible;
}

[Merlin]

*Parce que les traitements de texte ajoutent des caractères “parasites”, et parce-que les éditeurs de texte colorent automatiquement la syntaxe des scripts, ce qui rend leur lecture plus facile et évite des erreurs (image jointe).

 

Attachments:

You must be logged in to view attached files.

[Stephanie_982]

Merci pour ce retour! 🙂

 

Donc pour afficher les champs après avoir cocher ça fonctionne comme prévu, une seule case cochée à la fois comme souhaité. Par contre une fois que les champs sont affichés, je n’arrive plus à les masquer. Je dois ajouter une condition à la première partie pour déclencher le masquage des champs ?

[Merlin]

Pour masquer tous les champs il faut décocher toutes les cases, c’est la principale différence entre cases à cocher et boutons-radio : l’utilisateur peut désélectionner toutes les cases, contrairement aux boutons-radio.

[Auteur]

Réponses