Discussion :

[RomJo]

Bonjour à tous,
J'ai crée un formulaire contenant plusieurs champs ainsi que plusieurs boutons radios.
Lorsque je clique sur un des 4 radios, je voudrais afficher et cacher certains éléments de mon formulaire.
Pour cela, j'ai crée un fichier js qui récupère la valeur du radio selectionné.
Seulement je ne vois pas comment cacher les elements dans le form comme l'image.
Voici mon form:

Code :

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
25
26
27
28
29
public function init() {
        $this->setName('creation oeuvre');
        $this->setEnctype(Zend_Form::ENCTYPE_MULTIPART);
 
        $radio = new Zend_Form_Element_Radio('radio');
        $radio->setLabel('Type de média')
                ->setMultiOptions(array('Image', 'Son', 'Vidéo', 'Texte'))
                ->setRequired(true)
                ->addFilter('StripTags')
                ->addFilter('StringTrim')
                ->addValidator('NotEmpty');
 
        $image = new Zend_Form_Element_File('média');
        $image->setLabel('Charger une image:')
                ->setRequired(true)
                ->setDestination(APPLICATION_PATH . '/../data/temp')
                ->addValidator('Count', false, 1)
                ->addValidator('Size', false, array('max' => '2097152'))// 2Mo
                ->addValidator('Extension', false, 'jpg,png,gif')
                ->setDescription("Taille maximum: 2Mo / Extensions autorisées: jpg,png,gif");
 
        $titre = new Zend_Form_Element_Text("titre", array('size' => 25));
        $titre->setLabel('Titre du média')
                ->setRequired(true)
                ->addFilter('StripTags')
                ->addFilter('StringTrim')
                ->addValidator('NotEmpty')
                ->addValidator('StringLength', false, 3, 20)
                ->setDescription("Le titre du média doit avoir entre 3 et 20 caracteres alphanumeriques.");

[5h4rk]

Bonjour,
Du moment que tu as un id ou une class à l'élement tu que veux cacher tu peux faire un show ou un hide.

exemple avec un id :

Code :

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

$('#id').hide()

[RomJo]

Justement le problème est là.
L'id de l'élément selectionné, je n'arrive à le récupérer seulement en js.
Il faudrais en js que je retourne la valeur de l'id et que je transmette cette valeur en php.
Mais comment ?

Code :

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

1
2
3
4
5
6
  $('input[type=radio][name=radio]').click(function getValueRadio () {
            if ($(this).is(':checked')) {
                return $(this).val();
            }else{
                return 1;
            }

Ensuite dans le form, il faudra que j'ajoute une condition...

[5h4rk]

Pourquoi veux tu transmettre a PHP

[RomJo]

C'est ok, j'ai réussi, mais j'ai un code un peu redondant..

Code :

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
        $('input[type=radio][name=radio]').click(function getValueRadio () {
            if ($(this).is(':checked') && $(this).val() == 4) {                
                $('.id4').show();
                $('.id3').hide();
                $('.id2').hide();
                $('.id1').hide();
            }else if ($(this).val() == 2){                
                $('.id2').show();
                $('.id1').hide();
                $('.id3').hide();
                $('.id4').hide();
            }else if ($(this).val() == 3){                
                $('.id3').show();
                $('.id2').hide();
                $('.id1').hide();
                $('.id4').hide();
            }else{                
                $('.id1').show();
                $('.id2').hide();
                $('.id3').hide();
                $('.id4').hide();
            }
        });

Vous avez une idée pour améliorer celui-ci ?

[5h4rk]

C'est ok, j'ai réussi, mais j'ai un code un peu redondant..

Code :

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
        $('input[type=radio][name=radio]').click(function getValueRadio () {
            if ($(this).is(':checked') && $(this).val() == 4) {                
                $('.id4').show();
                $('.id3').hide();
                $('.id2').hide();
                $('.id1').hide();
            }else if ($(this).val() == 2){                
                $('.id2').show();
                $('.id1').hide();
                $('.id3').hide();
                $('.id4').hide();
            }else if ($(this).val() == 3){                
                $('.id3').show();
                $('.id2').hide();
                $('.id1').hide();
                $('.id4').hide();
            }else{                
                $('.id1').show();
                $('.id2').hide();
                $('.id3').hide();
                $('.id4').hide();
            }
        });

Vous avez une idée pour améliorer celui-ci ?

et :

Code :

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

1
2
3
4
5
6
7
8
9
10
        $('input[type=radio][name=radio]').click(function getValueRadio () {
 
            if ($(this).is(':checked')) {      
                $('.id1').hide();
                $('.id2').hide();
                $('.id3').hide();
                $('.id4').hide();
 
                $('.id'+$(this).val()).show();
        });

[Celira]

@5h4r : le dernier hide() ne devrait-il pas être un show() ?

Code js :

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

$('.id'+$(this).val()).show();

[5h4rk]

Si si autant pour moi c est modifié.

[RomJo]

Merci, cela fonctionne très bien.
Dès que je sélectionne un bouton radio, un champ texte s'affiche.
J'ai plusieurs boutons radios et donc plusieurs champs textes (visible ou non), et je voudrais ajouter un setrequired(true) dans le champ visible et uniquement celui là.
Comment puis-je faire pour rendre obligatoire uniquement le champ correspondant au radio cliqué?

[eaglesnipe]

Bonsoir,

Dernière question très intéressante, j'avais rencontré il y a quelques temps le même problème : ne mettre en required que le champ visible parmi plusieurs champs...

La solution que j'avais mis en place à l'époque, et c'est de la grosse bidouille je l'accorde, avait été de laisser à required tous les champs (le visible comme les cachés) mais de mettre une valeur par défaut définie (par exemple default_value) pour l'ensemble des champs cachés (et seulement eux) (à faire donc dans le JS en même temps que les .hide()). Lors de la soumission du formulaire, il n'y a alors plus de problème de validation concernant ces champs puisqu'ils sont renseignés... Dans le PHP ensuite, on se contente d'ignorer (ou de faire un traitement spécifique) sur les champs en question portant cette valeur définie...

Comme je l'ai dit, ça tient plus de la bidouille qu'autre chose, et je suis très curieux de voir si une solution plus élegante existe..

[shadypierre]

Tu peux créer une fonction de prévalidation qui en fonction des champs saisi rajoute des setRequired(), etc, puis renvoi vers la fonctions isValid()

[3Fred9]

Bonjour,

Pourrais tu stp RomJo mettre en ligne la partie de ton code concernant ce sujet
(fichier de ton formulaire + fichier javascript) car ayant la même problématique que toi, je n'arrive pas à faire fonctionner le code présent dans la discussion.

D'avance merci