it-swarm-fr.com

Masquage / affichage dynamique des champs de l'API de champ dans Drupal 7

J'ai créé une entité avec un formulaire "ajouter un nouveau". L'entité elle-même possède un nombre limité de variables réelles. J'ai ajouté la plupart des données supplémentaires dont j'ai besoin en utilisant des champs personnalisés (c'est-à-dire l'API Field).

À ce stade, je dois pouvoir masquer dynamiquement un champ en fonction de la valeur d'un autre. Par exemple, si un champ déroulant a sa valeur définie sur Non, un autre champ doit être masqué, sinon il doit être affiché.

D'après ce que je peux voir, il est assez facile d'ajouter cette fonctionnalité aux champs créés à l'aide de l'API Form (c'est-à-dire via la propriété AJAX), mais y a-t-il un moyen d'y parvenir en utilisant des champs attachés? Je n'ai aucun problème à utiliser Javascript personnalisé si c'est ce qui est nécessaire pour résoudre ce problème.

14
NRaf

jQuery fonctionne bien pour cela:

(function($) {
  $(document).ready(function() {
    $('#select1').change(function() {
      switch ($(this).val()) {
        case '1':
          $('#field2').hide();
          break;
        default:
          $('#field2').show();
          break;
      }
    });
  });
}) (jQuery);
5
keithm

Dans Drupal 7 vous pouvez utiliser $ form #states au lieu d'un script jQuery personnalisé. Exemple:

  $form['student_type'] = array(
    '#type' => 'radios',
    '#options' => array(
      'high_school'   => t('High School'),
      'undergraduate' => t('Undergraduate'),
      'graduate'      => t('Graduate'),
    ),
    '#title' => t('What type of student are you?')
  );

  // High school information.
  $form['high_school']['tests_taken'] = array(
    '#type' => 'checkboxes',
    '#options' => drupal_map_assoc(array(t('SAT'), t('ACT'))),
    '#title' => t('What standardized tests did you take?'),
    // This #states rule says that this checkboxes array will be visible only
    // when $form['student_type'] is set to t('High School').
    // It uses the jQuery selector :input[name=student_type] to choose the
    // element which triggers the behavior, and then defines the "High School"
    // value as the one that triggers visibility.
    '#states' => array(
      'visible' => array(   // action to take.
        ':input[name="student_type"]' => array('value' => 'high_school'),
      ),
    ),
  );

Voici un exemple si vous souhaitez utiliser #states pour la condition de valeurs multiples:

 $form['student_type'] = array(
    '#type' => 'checkboxes',
    '#options' => array(
      'high_school'   => t('High School'),
      'undergraduate' => t('Undergraduate'),
      'graduate'      => t('Graduate'),
    ),
    '#title' => t('What type of student are you?')
  );

  // High school information.
  $form['high_school']['tests_taken'] = array(
    '#type' => 'textfield',
    '#title' => t('What standardized tests did you take?'),
    '#states' => array(
      'visible' => array(   // action to take.
        ':input[name="student_type[high_school]"]' => array('checked' => TRUE),
        ':input[name="student_type[undergraduate]"]' => array('checked' => TRUE),
        ':input[name="student_type[graduate]"]' => array('checked' => FALSE),
      ),
    ),
  );

Voir le form_example/form_example_states.inc de module d'exemples pour plus de détails et d'exemples.

19
milkovsky

Vous devriez essayer Champs conditionnels , je pense que ce module est indispensable pour cette tâche. Vous pouvez définir des dépendances entre les champs sur une interface d'administration conviviale. Par exemple, vous pouvez définir le champ A pour qu'il soit uniquement visible si le champ B a la valeur " 1234 ", ou vous pouvez définir C textfield pour qu'il soit visible uniquement lorsque le champ D est coché, ou définissez le champ E sur invisible si F est concentré etc.

Sur le formulaire de téléchargement, ces dépendances seront définies côté client, sur l'affichage du nœud, ces dépendances seront définies côté serveur.

Vous pouvez définir ces dépendances sur admin/structure/types/manage/[YOURCONTENTTYPESMACHINENAME]/dependencies.

Conditional Fields(Source de l'image: le projet page )

4
Sk8erPeter