Boutons radios et JQuery

Version imprimable

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.:cry:
Voici mon form:

Code:

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.");

09/12/2011, 21h32
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:

$('#id').hide()

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:

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

09/12/2011, 22h26
5h4rk

Pourquoi veux tu transmettre a PHP

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

Code:

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 ?

Citation:

Envoyé par RomJo

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

Code:

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:

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();
        });

13/12/2011, 12h16
Celira

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

Code:

$('.id'+$(this).val()).show();
13/12/2011, 12h22
5h4rk

Si si autant pour moi c est modifié.
17/12/2011, 22h17
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é?
30/12/2011, 23h29
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.. :)
02/01/2012, 08h53
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()
19/01/2012, 12h32
3Fred9

Précisions...

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