1

I would like when a client check one of the checkboxes, a text field appeares. Example: if he clicks on 3 checkboxes, all the textfields of the 3 show off. My #checkboxes :

$form['input']['livraison'] = [
      '#title' => t('Options de livraison (à la charge de l’acheteur)'),
      '#type' => 'checkboxes',
      '#description' => t(''),
      '#options' => [
        'home' => $this->t('Retrait chez moi (gratuit)'),
        'hand' => $this->t('Remise en main propre (gratuit)'),
        'myself' => $this->t('Je livre moi-même le produit'),
        'colissimo' => $this->t('Colissimo'),
        'custom' => $this->t('Livraison personnalisée'),
      ],
      '#attributes' => [
        //define static name and id so we can easier select it
        'id' => 'select-shipping',
        'name' => 'field_select_shipping',
      ],
    ];

and my textfield :

$form['input']['adresse_home'] = [
      '#type' => 'textfield',
      '#title' => 'Adresse',
      '#required' => false,
      '#states' => [
        //show this textfield only if the radio 'other' is selected above
        'visible' => [
          ':input[name^="field_select_shipping"]' => [['checked' => 'false'], ['value' => 'home']],
          ':input[name^="field_select_shipping"]' => [['checked' => 'false'], ['value' => 'hand']],
          ':input[name^="field_select_shipping"]' => [['checked' => 'false'], ['value' => 'myself']],
          ':input[name^="field_select_shipping"]' => [['checked' => 'false'], ['value' => 'colissimo']],
          ':input[name^="field_select_shipping"]' => [['checked' => 'true'], ['value' => 'custom']],
],
      ],
    ];

**Solutions : **

As berramou sent, this way is the one that works the best with checkboxes.
If you have any issues with it look if a plugin couldn't block states, that what happened to me with iCheck.
If you need to show all the input's checked, just but the TRUE condition in your 'visible', this way you can select 2 options and get both display correctly.

  • Reviewing your code comments I dont know french but it seems to me that you will be better using a radios instead of checkboxes, give it a thought – d70rr3s Jan 13 at 14:03
  • Unlikely it would have been the best thing to do but ive to give the option to select multiple shipping solutions.. – StefanYYC Jan 13 at 14:05
2

To use state for checkboxes element, you should target the specific element by JQuery selector, all elements they have the name="field_select_shipping" with value attribute different so try to target the input with both attributes try with the following to show adresse_home only if home and colissimo checkbox checked:

$form['input']['adresse_home'] = [
      '#type'     => 'textfield',
      '#title'    => 'Adresse',
      '#required' => FALSE,
      '#states'   => [
        'visible' => [
         ':input[name="field_select_shipping"][value="home"]' => ['checked'   => TRUE],
         // This like AND so the input show if home and colissimo checked 
        ':input[name="field_select_shipping"][value="colissimo"]' => ['checked'   => TRUE],
        ],
      ]
    ];
0

Your approach is right but you have the wrong syntax.

$form['input']['adresse_home'] = [
  '#type' => 'textfield',
  '#title' => 'Adresse',
  '#required' => false,
  '#states' => [
    'visible' => [
      ':input[name^="field_select_shipping"]' => [['checked' => 'true'], ['value' => 'home']],
     // Omitted the rest.
  ],
];

UPDATE As commented here you need to set the name properly which already includes the value. I did not get that to work but using ^= selector and using AND target conditions I got it to work.

An excelent article about Form States API, thought is Drupal 7 is totally valid.

  • I tried to do as you gave me 'visible' => [ ':input[name="field_select_shipping"]' => ['value' => 'home'],['checked' => 'false'], ':input[name="field_select_shipping"]' => ['value' => 'hand'],['checked' => 'false'] etc... Yet nothing is happening just as before – StefanYYC Jan 13 at 13:28
  • I did look into the article you linked and I can't figure out where the problem could come from. – StefanYYC Jan 13 at 13:41
  • I've upated my answer (my bad I didnt catch that you were using checkboxes element). The issue is the selector, you can also use ':input[name^="field_select_shipping"][value="home"]' => ['checked' => 'true'], both are valid CSS selectors – d70rr3s Jan 13 at 13:45
  • I will try with ':input[name="field_select_shipping[home]"]' and come back to give you a feedback! – StefanYYC Jan 13 at 13:47
  • I tried and this time all the textfields are showing as soon as you arrive on the page :/. ':input[name="field_select_shipping[home]"]' => ['checked' => 'true'], ':input[name="field_select_shipping[hand]"]' => ['checked' => 'false'] Should I try to put only when checked is on true ? – StefanYYC Jan 13 at 13:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.