Afficher un text input dans un form si une checkbox est sélectionnée

Version imprimable

1 pièce(s) jointe(s)

Bonjour
Pour faire simple, j'ai un form avec une question du type "comment avez vous entendu parler de nous ?" et les réponses possibles sont des checkbox. J'aimerai que si l'utilisateur sélectionne "autre", un text input apparaisse instantanément. J'ai regardé la doc de symfony qui propose des solutions grâce à twig :
Pièce jointe 443512
mais cette solution ne fonctionne pas ..
Aussi, je ne connais pas du tout javascript donc le peu de solutions l'utilisant que j'ai testées étaient de simples copier coller...
Voilà le code du champs de mon form auquel je veux appliquer celà :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
->add('provenances', ChoiceType::class, [
                'expanded' => true,
                'multiple' => true,
                'label' => 'Comment avez-vous entendu parler
                            de la journée portes ouvertes ?',
                'choices' => [
                    'Forum des métiers, salons (Studyrama..)' => 'forum',
                    'Entourage/Proches' => 'proche',
                    'Etudiant actuel/ancien' => 'etudiant_actuel/ancien',
                    'Etablissement d’origine' => 'ecole',
                    'Presse' => 'presse',
                    'Site Web de l’IUT' => 'site',
                    'Internet' => 'internet',
                    'Facebook' => 'facebook',
                    'Linkedin' => 'linkedin',
                    'Autre' => 'autre',
                ],
            ])

Salut,
rapidement, un peu de théorie pour que tu comprennes bien ce qui se passe : PHP tourne sur un serveur HTTP qui est probablement Apache (plus rarement Nginx).
Ce que savent produire les serveurs HTTP, c’est du texte et uniquement du texte. Du code HTML ? Du code JavaScript ? Tout ça c’est juste du texte statique du point de vue du « tuyau » HTTP.

Sauf gros bug, le code PHP n’est jamais envoyé côté client. PHP produit du texte, qui est envoyé par le serveur. Pour voir le code reçu par ton navigateur, utilise la commande Ctrl+U (afficher le code source de la page), tu verras que c’est uniquement du code HTML (avec éventuellement du CSS et du JavaScript). Entraîne-toi à voir la correspondance entre du code twig (côté serveur) et le code HTML généré (côté client).

Dans un scénario classique, une fois que le navigateur a reçu le texte HTML et a commencé à l’interpréter, le script PHP est déjà terminé. Ainsi, PHP ne peut pas agir dynamiquement sur le contenu d’une page web. C’est pour ça que la solution twig que tu as trouvée ne fonctionne pas.

De manière générale, dès que tu as besoin d’ajouter du comportement à une page, de la rendre interactive, tu as besoin de JavaScript.

Pour afficher ton champ de texte, tu as deux solutions :

soit tu le fais générer par le serveur mais il est masqué au départ, et sera juste révélé par JavaScript ;
soit tu le crées via JavaScript.

La première solution me semble plus simple.

Dans les grandes lignes, tu dois faire ceci dans ton code JavaScript :

obtenir une référence sur la checkbox « autres »
obtenir une référence sur le champ à afficher / masquer
écouter l’évènement change de la checkbox
dans la fonction de change, consulter la propriété checked de la checkbox, et changer le style CSS display du champ

Pour les points 1 et 2, le plus simple est de leur ajouter un attribut id. Dans le cas de la checkbox, il faut ajouter un item 'choice_attr' à la déclaration, comme ceci :
Code:

1 2 3 4 5 6 7 8 ->add('provenances', ChoiceType::class, [ ... ... ... 'choice_attr' => [ 'Autre' => ['id' => 'checkbox-autre'], ], ])
Du moins c’est la théorie, je n’ai pas d’installation Symfony sous la main donc je ne peux pas vérifier ce que j’avance. Si ça ne marche pas, tu devras sans doute utiliser une fonction comme dans la doc (d’ailleurs, je trouve que l’exemple de choice_label est plus parlant que celui de choice_attr pour ce qu’on veut faire).

Dans le code JS, tu utiliseras la fonction getElementById.

Voici une ébauche de code JS pour t’inspirer :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 "use strict"; let checkbox = document.getElementById("checkbox-autre"); let champ = document.getElementById("id-du-champ"); checkbox.addEventListener("change", function () { if (this.checked) { champ.style.display = "block"; } else { champ.style.display = "none"; } });
Pour le champ, tu voudras peut-être l’encapsuler dans un bloc avec d’autres infomations (notamment un label), mais la méthode est la même : affiche / masque le bloc entier au lieu de seulement le champ.

22/01/2019, 22h14
cam-bdt

MERCI

Merci beaucoup pour votre réponse très précise :D
Je vais essayer ça

J'ai réussi en faisant ça :

```

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 function txtInput() {
        // Get the checkbox
        var checkBox = document.getElementById("form_info_gim_motifs_5");
        // Get the output text
        var text = document.getElementById("text");
 
        // If the checkbox is checked, display the output text
        if (checkBox.checked == true) {
            text.style.display = "block";
        } else {
            text.style.display = "none";
        }
    }

```

Par contre, une fois que je submit le form, les données des cases à cocher ou celles du text input ne sont pas ajoutées à la Base de donnée