Cómo ocultar y mostrar elementos de un formulario en Drupal 7

El FAPI que proporciona Drupal nos ofrece la facilidad de realizar casi cualquier cosa que necesitemos en un formulario, una de tantas posibilidades es mostrar uno o un conjunto de campos solo cuando un valor especifico de algún campo este seleccionado, para realizar esta característica podríamos hacerlo por medio de un código en jQuery implementado en un archivo separado e incluir este archivo con un llamado a drupal_add_js o bien implementar la propiedad #states con el que podemos realizar esta tarea de una manera simple.

El ”Aceptar términos y condiciones” de un sitio web es un caso de uso muy común de ocultar y presentar elementos de un formulario basado en la selección del usuario, veamos este ejemplo implementado con un formulario personalizado.

1. Implementar menu.

Primero debemos implementaremos el hook hook_menu() para definir la ruta donde se encuentra nuestro formulario personalizado, el código se leerá de la siguiente forma:

<pre title="Implementar hook_menu">function modulo_personalizado_menu() {
  $items = array();

  $items['accept_terms'] = array(
    'title' => t('Accept terms'),
    'page callback' => 'drupal_get_form',
    'page arguments' => array('_modulo_personalizado_acceptar_terminos_form', 1),
    'access callback' => 'user_is_logged_in',
    'type' => MENU_NORMAL_ITEM,
  );

  return $items;
}

2. Definir formulario personalizado

Ahora bien, definiremos nuestro formulario personalizado por medio de la función llamada: “_modulo_personalizado_acceptar_terminos_form”, el código será el siguiente:

<pre title="Definir formulario">function _modulo_personalizado_acceptar_terminos_form(){
  $form['accept_term'] = array(
    '#type' => 'checkbox',
    '#title' => t('Accept terms.'),
    );

  $form['save_info'] = array(
    '#type' => 'container',
    '#states' => array(
      'invisible' => array(
        ':input[name="accept_term"]' => array('checked' => FALSE),
        ),
      ),
    );

  $form['save_info']['actions'] = array('#type' => 'actions');
  $form['save_info']['submit'] = array(
     '#type' => 'submit',
     '#value' => t('Save'),
  );

 return $form;
}

Observamos que en la línea 9 definimos #states, el cual recibe un arreglo donde tiene como clave el valor: “invisible” y este mismo es quien recibe un arreglo asociativo, donde la clave es un selector valido en jQuery (‘:input[name=“accept_term”]’) y el valor es un arreglo con la definición del atributo por revisar y el valor que debe tener para que se cumpla el estado oculto (array(‘checked’ => FALSE)).

Cuando se selecciona aceptar los términos el botón de guardar seria visible como en la siguiente imagen.

Ahora bien, si fuera un “widget” de tipo selección también podemos utilizarlo para escoger el estado, observemos el mismo ejemplo pero utilizando un “select”, la implementación sería de la siguiente manera:

<pre title="Implementar usando un ">function _modulo_personalizado_acceptar_terminos_form(){

   $form['accept_term'] = array(
       '#type' => 'select',
       '#title' => t('Accept term'),
       '#options' => array(
         0 => t('No'),
         1 => t('Yes'),
       ),
   );

  $form['save_info'] = array(
    '#type' => 'container',
    '#states' => array(
      'invisible' => array(
        ':input[name="accept_term"]' => array('value' => 0),
        ),
      ),
    );

  $form['save_info']['actions'] = array('#type' => 'actions');
  $form['save_info']['submit'] = array(
     '#type' => 'submit',
     '#value' => t('Save'),
  );

 return $form;
}

Si probamos el código veremos el mismo resultado, pero utilizando un “widget” del tipo de selección.

Espero que les sea de mucha ayuda,

Saludos,