Drupal - Form API - #states sur champ checkbox

Les #states drupal permettent d'ajouter facilement une couche javascript sur nos formulaires, pour par exemple afficher un champ en fonction d'un autre...

Ces exemples marchent sur les version drupal 7, 8, 9 et 10.

Exemple issu d'un patch que j'ai soumis pour le module twitter_post :

  $form['twitter_post_add_tracking_code'] = array(
    '#type' => 'checkbox',
    '#title' => t('Add tracking code'),
    '#default_value' => variable_get('twitter_post_add_tracking_code', 0),
  );
  //Le champ qui suit ne sera visible que si le champs précédant est coché
  //cela grâce à l'option #states
  $form['twitter_post_add_tracking_code_utm_medium'] = array(
    '#type' => 'textfield',
    '#title' => t('Campaign Medium  (utm_medium)'),
    '#maxlength' => 140,
    '#default_value' => variable_get('twitter_post_add_tracking_code_utm_medium', ''),
    '#states' => array(
      //Ă€ noter, le required ne fera qu'ajouter une asterisque rouge, aucun test ne sera
      //effectué côté serveur. (merci @DuaelFr)
      'required' => array(
        ':input[name="twitter_post_add_tracking_code"]' => array('checked'=>true)
      ),
      'visible' => array(
        ':input[name="twitter_post_add_tracking_code"]' => array('checked'=>true)
      ),
    ),
  );

Il est aussi possible de faire la mĂŞme chose avec un champ checkbox multiple :

      $form['mon_champ'] = [
        '#type' => 'checkboxes',
        '#title' => 'Mon champ checkboxes',
        '#options' => [
          'option_1' => 'Option 1',
          'option_2' => 'Option 2',
          'option_3' => 'Option 3',
        ],
      ];
      
      $form['mon_champ_dependant'] = [
        '#type' => 'checkbox',
        '#title' => 'Affiché que si on a choisi l\'option 2',
        '#states' => [
          'visible' => [
            ':input[name="mon_champ[option_2]"]' => ['checked' => TRUE],
          ],
        ]
      ];

Ajouter un commentaire

Ne sera pas publié
CAPTCHA
Désolé, pour ça, mais c'est le seul moyen pour éviter le spam...