show hidden select type with javascript

Question

I work with symfony framework and I have two select Type:

the 2nd select is initially Hidden and relative to the value of the first select the 2nd select will be displayed : for that I tried to do $this :

Script

<script type="text/javascript">
$(document).ready(function () {
    $('.type-produit ').change(function() {
     if ($('select[id$="_type"]>option:selected').text() == "Unité")
     {  $('.hidden ').show();  } 
    });
}); 
</script>

FormType

$formMapper
->add('type','choice', array(
     'choices' => array('Kg' => 'Kg', 'Unité' => 'Unité'),
     'label' => 'Type de vente',
     'attr' =>array('class'=>'type-produit')
))

->add('soustype',HiddenType::class, array(
     'data' => ['Liquide'=>'Liquide','Autres'=>'Autres'],
     'label' => 'Sous types',
     'attr'=>array('class'=>'hidden')
))

But the 2nd select still not displayed , someone can help me please ? thanks for all

HiddenType is normally not visible by default. Set the Second Option to TextType. — Cesur APAYDIN, Sep 04 '17 at 11:57

score 1 · Accepted Answer · answered Sep 04 '17 at 12:00

1

Change the soustype field to choice type (HiddenType field is rendered as <input type="hidden">), then you can hide or show the field in the script.

FormType

...
->add('soustype', 'choice', array(
        'choices' => ['Liquide'=>'Liquide','Autres'=>'Autres'],
        'label' => 'Sous types',
        'attr' => array('class'=>'soustype')
))

Script

$(document).ready(function () {
    $('.soustype').hide();

    $('.type-produit ').change(function() {
         if ($('select[id$="_type"]>option:selected').text() == "Unité") { 
            $('.soustype ').show();  
        }
    });
});

answered Sep 04 '17 at 12:00

miikes

964
7
13

whene I tried your solution the 2nd select still displayed initally and an other select field is added if I choose "Unité" from the 1st select – Dhia Eddine Farah Sep 04 '17 at 12:22
Show the form type definition. – miikes Sep 04 '17 at 12:46
thanks @miikes it work , juste I have error that I fixed it in other script in the same page – Dhia Eddine Farah Sep 04 '17 at 13:22

show hidden select type with javascript

1 Answers1