Symfony 2 - 根据另一个字段中的选择动态隐藏字段

Question

I've searched a lot, but can't find the answer to this rather simple question:

In Symfony 2.8 I have a form, that renders a country field. Based on it's selection I want to display a zipcode and federalstate field only for the choice 'Deutschland' (data 'D'). Here is the code for the country-field:

                ->add('nationveranstaltungsort', ChoiceType::class, array(
                    'choices' => array(
                        'D' => 'Deutschland',
                        'AFG' => 'Afghanistan',
//many other countries following                   
                    ),
                    'data' => 'D',
                    'label' => 'Nation Tagungsstätte'))

it's prepopulated with the Choice 'Deutschland', data 'D'.

based on that i want to dynamically display:

->add('plzveranstaltungsort', TextType::class, array('label' => 'PLZ', 'attr' => array('size' => '5', 'maxlength' => '5')))
                ->add('bundeslandveranstaltungsort', ChoiceType::class, array(
                    'choices' => array(
                        0 => '     ',
                        1 => 'Baden-Württemberg',
                        2 => 'Bayern',
                        3 => 'Berlin',
                        4 => 'Brandenburg',
                        5 => 'Bremen',
                        6 => 'Hamburg',
                        7 => 'Hessen',
                        8 => 'Mecklenburg-Vorpommern',
                        10 => 'Nordrhein-Westfalen',
                        11 => 'Rheinland-Pfalz',
                        12 => 'Saarland',
                        13 => 'Sachsen',
                        14 => 'Sachsen-Anhalt',
                        15 => 'Schleswig-Holstein',
                        16 => 'Thüringen',
                    ),
                    'data' => 0,
                    'label' => 'Bundesland Tagungsstätte'))

If "Deutschland" is not selected, I simply want to hide/disable these fields (and handle the null value somewhere else).

I tried http://symfony.com/doc/current/form/dynamic_form_modification.html and some other javascript stuff, but as I basically don't know any JS, I couldn't find any proper resources.

Answer 1

Since by default the nationveranstaltungsort field has Germany selected, then there is no need to hide plzveranstaltungsort. You can hide in Javascript by using something like:

var bund = document.getElementById("bundeslandveranstaltungsort");
bund.style.display = "none";

Then to show the element use:

bund.style.display = "inline";

Depending on what css you are using, you might need to use:

bund.style.display = "block";

In you form you can specify an attribute to run a Javascript function on change like so:

->add('nationveranstaltungsort', ChoiceType::class, array(
    'choices' => array(
        'D' => 'Deutschland',
        'AFG' => 'Afghanistan',
    ),
    'data' => 'D',
    'label' => 'Nation Tagungsstätte',
    'attr' => array(
            'onchange' => 'changeCountry()',
    ),
))

Then in the Javascript function changeCountry() hide the element or show it using the above. The ids I show are not actually what you will use, but if you use the browser tools, for example in Firefox (I suggest using FireFox for testing), you can right-click on the choice element and choose "Inspect element"; then you can see what the "actual" id value is that you need to use. It depends on your Form name.