Hola gente como están. Hoy voy a hablar de campos dependientes en formularios.
Ctools entre las utilidades que nos da, nos proporciona la posibilidad de indicar cuales elementos de formulario dependen de otros.
Puede parecer algo que añada complejidad, pero nada mas lejos de la realidad. De hecho, para implementarlo solo necesitas dos lineas de código.
Elementos
Los elementos que son capaces de mostrar contenidos en base a lo seleccionado son:
- checkbox/checkboxes
- radios
- select
Luego está lo que se muestre
Cualquier elemento FAPI es susceptible de ser dependiente de alguno de los elementos mencionados antes. por ejemplo, un textfield, un textarea, otros select, e incluso fieldsets.
Acá van tres ejemplos:
select
Es el mas simple de todos:
<?php
function formulario_ejemplo_de_selects() {
ctools_include('dependent');
$form['pais_select'] = array(
'#title' => 'Selecciona un país',
'#type' => 'select',
'#required' => TRUE,
'#options' => array(
"es" => "España",
"other" => "Otro"
),
);
$form['provincias_espanolas'] = array(
'#title' => 'Selecciona tu provincia',
'#type' => 'select',
'#options' => array(
0 => "Alava",
1 => "Albacete",
2 => "Etcétera"
),
'#dependency' => array('edit-pais-select' => array('es')),
);
$form['provincia_extrangera'] = array(
'#title' => t('Provincia'),
'#description' => t('Indica la provincia de tu país'),
'#type' => 'textfield',
'#required' => TRUE,
'#dependency' => array('edit-pais-select' => array('other')),
);
return $form;
}
Se aprecia rápidamente que es un formulario normal de toda la vida pero que tiene dos extras:
| ctools_include(‘dependent’); | Necesario en todo formulario que quiera hacer uso de elementos dependientes ya que es el plugin que nos lo permite. |
| ‘#dependency’ => array(‘DOM id sin “#”‘ => array(‘un_valor_del_select’)), | Es la propiedad que le dice a este elemento de formulario de quien depende. para que funcione solo tenés que indicarle cual es el DOM id del select (en este caso es #edit-pais-select) y cual es el valor que espera para mostrarse. |
Explicado lo anterior se entiende bastante bien que se va a mostrar el select de provincias españolas solo si la opción seleccionada en $form['pais_select'] es “es” por ejemplo.
Y esa es la base del plugin. los radio y checkbox tienen unas particularidades así que dejo los ejemplos respectivos para aclararlo.
radios
Para usar radios es necesario cambiar un poco el selector que usamos en #dependency.
<?php '#dependency' => array('radio:pais_radios' => array('other')),
Como pueden ver y a no estamos usando el DOM id, sino que en su lugar estamos usando “radio:” seguido del nombre del field “pais_radios“. Si se preguntan por que es así en los radios es porque necesita hacer referencia a la propiedad “name” del elemento ya renderizado (pueden inspeccionar los name de los radios en firebug para confirmarlo).
Aquí el ejemplo:
<?php
function formulario_ejemplo_de_radios() {
ctools_include('dependent');
$form['pais_radios'] = array(
'#title' => 'Selecciona un país',
'#type' => 'radios',
'#required' => TRUE,
'#options' => array(
"es" => "España",
"other" => "Otro"
),
'#default_value' => "other"
);
$form['provincias_espanolas'] = array(
'#title' => 'Selecciona tu provincia',
'#type' => 'select',
'#options' => array(
0 => "Alava",
1 => "Albacete",
2 => "Etcétera"
),
'#dependency' => array('radio:pais_radios' => array('es')),
);
$form['provincia_extrangera'] = array(
'#title' => t('Provincia'),
'#description' => t('Indica la provincia de tu país'),
'#type' => 'textfield',
'#required' => TRUE,
'#dependency' => array('radio:pais_radios' => array('other')),
);
return $form;
}
Checkbox/es
Nuevamente en los checkboxes #dependency cambia ligeramente. Seguimos usando el DOM id pero cada uno de los checkboxes tiene su propio id y el valor no es ni “es” ni “other” (son los ejemplos que estábamos usando en los formularios de muestra). En su lugar hay que usar 1 o 0 para indicar si queremos que los elementos se muestren cuando esté activo o inactivo.
Como soy malisimo explicando mejor les dejo el ejemplo:
<?php
function formulario_ejemplo_de_checkboxes() {
ctools_include('dependent');
$form['pais_select'] = array(
'#title' => 'Selecciona un país',
'#type' => 'checkboxes',
'#required' => TRUE,
'#options' => array(
"es" => "España",
"other" => "Otro"
),
);
$form['provincias_espanolas'] = array(
'#title' => 'Selecciona tu provincia',
'#type' => 'select',
'#options' => array(
0 => "Alava",
1 => "Albacete",
2 => "Etcétera"
),
'#dependency' => array('edit-pais-select-es' => array(1)),
);
$form['provincia_extrangera'] = array(
'#title' => t('Provincia'),
'#description' => t('Indica la provincia de tu país'),
'#type' => 'textfield',
'#required' => TRUE,
'#dependency' => array('edit-pais-select-other' => array(1)),
);
return $form;
}
Para que puedan probarlo les adjunto un modulo con los ejemplos. Para probar cada uno de los ejemplos accedan a las siguientes URL:
- /formulario-dependiente-de-select
- /formulario-dependiente-de-radios
- /formulario-dependiente-de-checkboxes
Chau!
.