drupal: Form API, dynamically hide or show fields based on input

Question

I'm building a form module. One of the early fields is a set of radio buttons. By default the first button is selected. Next I'll have a series of select boxes. One needs to be visible, the others invisible. Then as the user selects a different radio button I want different select boxes to show or hide. How can I hide the field and label by default and show it later dependent upon which radio button (or another select box option for that matter) is chosen?

I'm on my mobile so can't find links with ease for you. Check Form API Referenc and you will see a #ajax property to set. That's how we usually do it. But raw JavaScript or jquery is also an option. — AKS, Oct 05 '12 at 20:55

Muhammad Reda · Accepted Answer · 2019-11-25T12:08:11.990

19

You can use the #states property to achieve that. The #states property can be applied to all Form API elements.

Here's the documentation link with an example.

edited Nov 25 '19 at 12:08

answered Oct 06 '12 at 01:48

Muhammad Reda

26,379
14
93
105

Thanks a lot! I was looking through the api, but there's a lot there so this was easily missed. – LoneWolfPR Oct 08 '12 at 14:57
Really glad it helped :)... -Muhammad. – Muhammad Reda Oct 08 '12 at 20:44
Here is another documentation link from Lullabot that explains the Drupal Form API States - https://www.lullabot.com/articles/form-api-states – anoopjohn Nov 11 '19 at 23:29

score 12 · Answer 2 · answered Jun 24 '14 at 05:30

simple usage example of #states: To show a select field with name 'item' only if another field with name 'type' has value 'sell'

$form['item'] = array( 
        '#title' => t('Task Item'),
        '#type' => 'select',
        '#states' => array(
            // Only show this field when the value of type is sell.
            'visible' => array(
                ':input[name="type"]' => array('value' => 'sell'),
            ),
        ),
    );

Which hook would this be used in? – The Unknown Dev Dec 20 '17 at 22:52 — The Unknown Dev, Dec 20 '17 at 22:52

score 2 · Answer 3 · answered Jun 20 '13 at 06:16

You could also use 'Conditional Fields' module. Here is the link: https://drupal.org/project/conditional_fields It provides a 'Manage Dependencies' tab while creating a content type where you can select which fields to be visible when a field has a particular value.

drupal: Form API, dynamically hide or show fields based on input

3 Answers3

Linked