En el último proyecto en el que estoy desarrollando en el trabajo he tenido que crear unos combos dependientes, hasta el momento siempre los había hecho con Javascript, usando Ajax para cargar los datos de un combo a otro, pero para este proyecto quería hacerlo un poco más accesible.
Como ya hemos visto en muchos posts, el desarrollar pensando en ser accesibles para todo el mundo es complicado, pero no imposible.
Empecemos
Lo primero que tenemos que hacer es tener claro que es lo que queremos hacer, en el ejemplo, una select de destino que dependerá de una select padre llamada pais.
Viendo que es lo que necesitamos crear, veamos como podría ser una aproximación al código PHP que necesitamos.
Al código…
Primero vayamos por partes, y como hay que empezar por alguna definamos la estructura en el servidor y ya iremos subiendo.
destino.php
<?php if ($_POST["type"] == "xml") header ("content-type: text/xml"); ?>
<select id="destino" name="destino">
<option value="-1">Selecciona una zona</option>
<?php if ($_POST["pais"] == "ES"){ ?>
<option value="PMI">Palma de Mallorca</option>
<option value="AGP">Malaga</option>
<option value="BCN">Barcelona</option>
<?php } else if($_POST["pais"] == "FR") { ?>
<option value="TOU">Toulousse</option>
<option value="CHD">Charles de Gaulle</option>
<?php } ?>
</select>
Este fichero es un ejemplo rápido de un XML bien formado, que a su vez hará de elemento <select /> en nuestro script. La primera línea nos condicionará, más adelante, el formato de salida que usaremos. Ahora veamos en donde lo incrustamos.
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
<title>Combos dependientes accesibles</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form id="form" method="post" action="<?=$url?>">
<p class="pais">
Pais:
<select name="pais" id="pais">
<option value="-1">Selecciona un pais</code>
<option value="ES">España</code>
<option value="FR">Francia</code>
</select>
</p>
<p class="destino">
<?php echo "Destino: ";
include("destino.php");
?>
</p>
<p class="submit">
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>
Como vemos, lo incluimos mediante un include normal, que nos generará el HTML necesario para que veamos un <select />.
Si ahora miramos el código resultante, nos encontramos con esto.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
<title>Combos dependientes accesibles</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form id="form" method="post" action="<?=$url?>">
<p class="pais">
Pais:
<select name="pais" id="pais">
<option value="-1">Selecciona un pais</code>
<option value="ES">España</code>
<option value="FR">Francia</code>
</select>
</p>
<p class="destino">
Destino:
<select id="destino" name="destino">
<option value="-1">Selecciona una zona</option>
</select>
</p>
<p class="submit">
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>
Como podemos ver, se trata de un HTML normal, sin ningún tipo de secreto. Ahora empezemos a ponerle polvos mágicos para que esata rana se convierta en principe.
Abracadabra…
Para hacer mágia, voy a usar jQuery (principalmente por su simplicidad para el ejemplo) y con él veremos lo fácil que es conseguir unos combos disponibles para todos. Primero hemos de volver a replantearnos los ficheros PHP
<?php
$hayPais = false; // No hay pais por defecto
if (isset($_POST["pais"])) $hayPais = true; //Si hay país
// URL de destino
$url = ($hayPais)?"receptor.php":"";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
<title>Combos dependientes accesibles</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<form id="form" method="post" action="<?=$url?>">
<p class="pais">
Pais:
<?php if ($hayPais) : ?>
<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
<?php else: ?>
<select name="pais" id="pais">
<option value="-1">Selecciona un pais</code>
<option value="ES">España</code>
<option value="FR">Francia</code>
</select>
<?php endif;?>
</p>
<p class="destino">
<?php if ($hayPais) {
echo "Destino: ";
include("destino.php");
} else { ?>
<noscript>
<input type="submit" value="Buscar Destinos" />
</noscript>
<?php } ?>
</p>
<p class="submit">
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>
Vayamos por partes:
<?php
$hayPais = false; // No hay pais por defecto
if (isset($_POST["pais"])) $hayPais = true; //Si hay país
/*
Esta versión es más corta, pero menos ilustrativa.
$hayPais = isset($_POST["pais"]); // ¿Existe $_POST["pais"];
*/
// URL de destino
$url = ($hayPais)?"receptor.php":"";
?>
Con la variable $hayPais, arrastramos por todo el script un valor Booleano que nos permite conocer si el parámetro $_POST["pais"] existe. De esta forma, las futuras comprobaciones son más sencillas.
Acto seguido, nos encargamos de informar la variable $url, que contendrá la URL a donde ha de ser redirigido el formulario. Esto es simplemente para conseguir submitar al lugar correcto en cada paso.
<?php if ($hayPais) : ?>
<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
<?php else: ?>
<select name="pais" id="pais">
<option value="-1">Selecciona un pais</code>
<option value="ES">España</code>
<option value="FR">Francia</code>
</select>
<?php endif;?>
Al igual que la comprobación anterior, sabiendo que hemos recibido el parámetro $_POST["pais"], modificamos el <select /> por un elemento <input /> con el valor que hemos pasado previamente. Esto nos servirá para submitar el valor a la página siguiente.
<?php if ($hayPais) {
echo "Destino: ";
include("destino.php");
} else { ?>
<noscript>
<input type="submit" value="Buscar Destinos" />
</noscript>
<?php } ?>
Aqui es donde está parte de la gracia del script, y curiosamente se llama <noscript />. Como podemos ver, en caso de haber pasado el parámetro $_POST["pais"], cargaremos el fichero destino.php y este ya se encargará de mostrar los datos relacionados al parámetro enviado. En caso de no enviar este parámetro, insertaremos el tag <noscript /> que contendrá un elemento <input type="submit" /> que se encargará de submitar el formulario con el valor necesario para cargar $_POST["pais"].
Hasta ahora, todo bien. Salvo para los que si tenemos Javascript activo. No nos olvidemos que el tag <noscript /> no será mostrado en caso de disponer de Javascript en nuestro navegador. Para ello, debemos extendernos a la siguiente capa, la del javascript.
Mejorando la experiencia del usuario
Como hemos dicho antes, usaremos jQuery para la capa de cliente. Así, que manos a la obra.
<?php
$hayPais = false; // No hay pais por defecto
if (isset($_POST["pais"])) $hayPais = true; //Si hay país
// URL de destino
$url = ($hayPais)?"receptor.php":"";
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es_ES">
<head>
<title>Combos dependientes accesibles</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// Creamos elemento destino y lo incrustamos en <p class="destino">
$("p.destino").append('Destino: <select id="destino" name="destino"><option value="-1">Seleciona un destino</option></select>');
// Modificamos el action del formulario a la página receptora.
$("form#form").attr("action", "receptor.php");
// Definimos la petición de ajax, al fichero destino.php
$("#pais").bind("change", function() {
$.post("destino.php", {pais: $(this).val(), type: "xml"}, function(xml){
$("#destino").empty();
$(xml).find("option").each(function(x,el) {
$("#destino").append('<option value="'+$(el).attr("value")+'">' +$(el).text() + '</option>');
});
}, "xml");
});
});
</script>
</head>
<body>
<form id="form" method="post" action="<?=$url?>">
<p class="pais">
Pais:
<?php if ($hayPais) : ?>
<input type="text" name="pais" value="<?=$_POST["pais"]?>" />
<?php else: ?>
<select name="pais" id="pais">
<option value="-1">Selecciona un pais</code>
<option value="ES">España</code>
<option value="FR">Francia</code>
</select>
<?php endif;?>
</p>
<p class="destino">
<?php if ($hayPais) {
echo "Destino: ";
include("destino.php");
} else { ?>
<noscript>
<input type="submit" value="Buscar Destinos" />
</noscript>
<?php } ?>
</p>
<p class="submit">
<input type="submit" value="Enviar" />
</p>
</form>
</body>
</html>
Destripémoslo un poco para entenderlo mejor.
<script type="text/javascript" src="jquery.js"></script>
Cargamos jQuery para disponer de las ventajas que nos ofrece este framework.
// Creamos elemento destino y lo incrustamos en <p class="destino">
$("p.destino").append('Destino: <select id="destino" name="destino"><option value="-1">Seleciona un destino</option></select>');
Dentro del $(document).ready(... definimos las tareas que ayudarán al usuario. La que vemos arriba se encarga de añadir el <select /> de destinos vacio en el lugar apropiado, pendiente de ser relleneado con la petición ajax.
// Modificamos el action del formulario a la página receptora.
$("form#form").attr("action", "receptor.php");
Modificamos el action del formulario para que la ruta de submit sea la correcta.
// Definimos la petición de ajax, al fichero destino.php
$("#pais").bind("change", function() {
$.post("destino.php", {pais: $(this).val(), type: "xml"}, function(xml){
$("#destino").empty();
$(xml).find("option").each(function(x,el) {
$("#destino").append('<option value="'+$(el).attr("value")+'">' +$(el).text() + '</option>');
});
}, "xml");
});
Con este código, lanzamos una petición a nuestro fichero destino.php con los parámetros pais y type, cargamos con los datos que necesitamos para que al detectar un cambio en el elemento <select id="pais" /> este envie la petición indicando que quiero recibir los datos en XML para luego recorrerlo y pintar las option que necesito para rellenar <select id="destino" />
Resultado
El resultado es una página en la que podemos acceder con dos posibles configuraciones, con Javascript o sin él. En caso de entrar con javascript, todo estará preparado para usarlo y hacer que selección de destino sea mediante Ajax y en un solo paso.
En caso de tener el javascript desactivado, tendremos que realizar un paso más para cargar los datos referentes al destino, pero al final enviaremos los mismo datos a la página siguiente.
Podeis probarlo en esta demo que he montado, solo he podido probar el JS en Firefox, así que si alguien me lo puede probar en otros navegadores se lo agradeceré.
Espero vuestras opiniones, y sugerencias.
