Campos SELECT dinámicos con jQuery, Ajax, PHP y MySQL

31 de mayo de 2010

Un script para generar dos campos de formulario SELECT dinámicos y combinados, con programación cliente Javascript y Ajax con jQuery y programación servidor por medio de PHP y MySQL.

La creación de los campos SELECT combinados es una de las tareas clásicas que algún desarrollador va a tener que solucionar algún día. Existen muchas maneras de llevarla a cabo, pero sin duda, cuando se utiliza Ajax el resultado de cara al usuario es mucho mejor. En este artículo queremos mostrar una manera de hacer que las opciones de un SELECT dependan de lo que se haya escogido en otro, lo que conocemos como "selects dinámicos" o "selects combinados".

Para ello vamos a relatar un caso práctico completo. Un sistema que nos permitirá escoger provincias en un select y luego una población en otro select, que dependerá de la provincia seleccionada en el promer select. Veremos todo el sistema de manera global, desde la programación del cliente con Javascript y Ajax, pasando por el desarrollo en el servidor por medio de PHP y una base de datos MySQL donde están todas las provincias y poblaciones. Además, utilizaremos el el framework Javascript jQuery, para facilitarnos la vida gracias a sus funciones para hacer Ajax y modificar el DOM de la página.

Nota: Recordar que en DesarrolloWeb.com podréis aprender sobre todas las tecnologías utilizadas, como Javascript, Ajax, jQuery, PHP, MySQL...
Así mismo, podemos consultar otros artículos que también tratan sobre hacer este tipo de interfaces de usuario, como Elementos de formulario select asociados con Javascript http://www.desarrolloweb.com/articulos/1281.php o bien Selects combinados con Ajax y PHP.

En el ejercicio utilizaremos en total 3 tablas: provincias, poblaciones y clientes. En este tutorial vamos a insertar y modificar la base de datos, para ello necesitaremos crear 3 documentos: insertar.php, modificar.php y buscar.php.

Para los documentos insertar.php y modificar.php iniciamos el documento poniendo la conexión a base de datos y el enlace con la librería jQuery.

Nota: Si te interesa el código fuente de los archivos de este ejemplo te recomiendo que no copies y pegues el código que aparece en este artículo. Es mucho mejor que descargues todo el código para hacer los selects dinámicos de la la página de GitHub: http://github.com/desarrollowebcom/SELECT-dinamicos-jQuery-Ajax-PHP-MySQL/downloads

<?
function Conectarse(){
if (!($link=mysql_connect("localhost","root","")))
{echo "Error conectando a la base de datos.";
exit();
}
if (!mysql_select_db("desarrolloweb",$link))
{
echo "Error seleccionando la base de datos.";
exit();
}
return $link;
}
$link=Conectarse();

echo "<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=ISO-8859-1\" />
<script src=\"http://code.jquery.com/jquery-latest.js\"></script>
</head>

<body>";
?>

Y para su finalización :

Ahora creamos el formulario de insertar. Como podemos ver, en el select RE_Prov he puesto un atributo que lo utilizaremos para modificarlo. Si esta vacío al insertar no pasa nada.

<?
echo "<FORM action=\"".$_SERVER["PHP_SELF"]."\" method=\"POST\" style='margin:30px 5px 30px 5px;'>
<table width=\"500px\">
<tbody>
<tr>
<td>Nombre</td>
<td><input type=\"text\" name=\"nombre\" /></td>
</tr>
<tr>
<td>Provinvia</td>
<td><select name='RE_Prov' id=\"provincia\" poblacioattri=''>
<option value=''>Seleccione provincia</option>";
$B_BUSCAR= mysql_query ("SELECT * FROM provincias order by provincia asc",$link);
$R_BUSCAR=mysql_fetch_assoc($B_BUSCAR);
$C_BUSCAR=mysql_num_rows($B_BUSCAR);
$suma=0;
do{ ++$suma;
echo "<option value='".$R_BUSCAR['id']."'>".$R_BUSCAR['provincia']."</option>";
}while($R_BUSCAR=mysql_fetch_assoc($B_BUSCAR));
echo "</select> <span id='Buscando'></span></td>
</tr>
<tr>
<td>Población</td>
<td><select name='RE_pobla' id=\"poblacionList\">
<option value='' selected='selected'>Seleccionar población</option>
</select></td>
</tr>
<tr>
<td></td>
<td><input type=\"submit\" /></td>
</tr>
</tbody>
</table>
</form>";
?>

Este es el Script que utilizaremos para hacer la búsqueda a la base de datos.

Detalles del script:
Para saber el valor de la provincia: var numero =document.getElementById("provincia").value;
Cuando movemos este select escribimos en buscando.... esto está puesto aquí:
var to=document.getElementById("Buscando");
to.innerHTML="buscando....";

Enviamos la información deseada al documento busqueda.php en post y enviado estos datos:

data: 'idnumero='+numero+'&idpobla='+poblacio,
idnumero es el valor del select de la provincia y idpobla es el atributo pero que ahora esta vació.
Cuando se realice la busqueda lo mostraremos aquí:

jQuery('#poblacionList').html(a);

y el borraremos buscando.... así:

var to=document.getElementById("Buscando");
to.innerHTML="";

Ponemos lla inserción a la base de datos.

<?
if($_POST["nombre"]){
$nombre=addslashes($_POST["nombre"]);
$RE_Prov=addslashes($_POST["RE_Prov"]);
$RE_pobla=addslashes($_POST["RE_pobla"]);

$insertar=mysql_query("INSERT clientes (nombre,provincia,poblacion) VALUES ('$nombre','$RE_Prov','$RE_pobla')",$link);
if ($insertar==1){echo "<script>alert(\"Se ha insertado.\");</script>";}else{echo "<script>alert(\"Error!!!!.\");</script>";}
}
?>

y cerramos :

</body>
</html>
?>

Ahora vamos a explicar que hay en buscar.php:
Primero ponemos la conexión y su búsqueda a la base de datos i mostramos los resultados.
Recordar que desde insertar.php y modificar.php se envían dos variables por POST que son $_POST["idnumero"] que es el valor de la provincia y después $_POST["idpobla"] que es el valor de la población.

<?
function Conectarse()
{
if (!($link=mysql_connect("localhost","root","")))
{
echo "Error conectando a la base de datos.";
exit();
}
if (!mysql_select_db("desarrolloweb",$link))
{
echo "Error seleccionando la base de datos.";
exit();
}
return $link;
}
$link=Conectarse();

$B_BUSCAR= mysql_query ("SELECT * FROM poblaciones where idprovincia='".$_POST["idnumero"]."' order by poblacio asc",$link);
$R_BUSCAR=mysql_fetch_assoc($B_BUSCAR);
$C_BUSCAR=mysql_num_rows($B_BUSCAR);
if($C_BUSCAR){
do{
if($_POST["idpobla"]==$R_BUSCAR['id']){$TRUE=" selected='TRUE'";}else{$TRUE="";}
echo "<option value='".$R_BUSCAR['id']."' $TRUE>".htmlentities($R_BUSCAR['poblacio'])."</option>";

}while($R_BUSCAR=mysql_fetch_assoc($B_BUSCAR));
}else{
echo "<option value=''>".htmlentities("Seleccionar población")."</option>";
}
mysql_close($link);
?>
?>

Ahora vamos a crear el formulario de modificar, pero promero vamos a crear el listado con los resultados que hay en la tala de clientes y después iremos al formulario mediante un link.

<?
// Para hacerlo sencillo he puesto una variable que se llama ac y que si no existe se muestra el listado esta variable se envía por GET.
if(!$_GET["ac"]){
echo "<h3>Listado</h3>
<table width=\"500px\" style='margin:30px 5px 30px 5px;'>";
$B_BUSCAR= mysql_query ("SELECT * FROM clientes",$link);
$R_BUSCAR=mysql_fetch_assoc($B_BUSCAR);
$C_BUSCAR=mysql_num_rows($B_BUSCAR);
$suma=0;
do{ ++$suma;
echo "<tr><td><a href='".$_SERVER["PHP_SELF"]."?ac=1&id=".$R_BUSCAR["id"]."'>$suma ".stripslashes($R_BUSCAR["nombre"])." (Modificar)</a></td></tr>";
}while($R_BUSCAR=mysql_fetch_assoc($B_BUSCAR));
echo "</table>";
}else{
// Ahora buscamos los datos seleccionados.

$B_cliente= mysql_query ("SELECT * FROM clientes where id='".$_GET["id"]."'",$link);
$R_cliente=mysql_fetch_assoc($B_cliente);
$C_cliente=mysql_num_rows($B_cliente);

// Recuperamos la información y la ponemos dentro de una variable.
$nombre=stripslashes($R_cliente["nombre"]);
$RE_Prov=stripslashes($R_cliente["provincia"]);
$RE_pobla=stripslashes($R_cliente["poblacion"]);

echo "
<h3>Modificar</h3>
<FORM action=\"".$_SERVER["PHP_SELF"]."\" method=\"POST\" style='margin:30px 5px 30px 5px;'>
<table width=\"500px\">
<tbody>
<tr>
<td>Nombre</td>
<td><input type=\"text\" name=\"nombre\" value='$nombre' /></td>
</tr>
<tr>
<td>Provinvia</td>";
// Ahora si que utilizamos el atributo poblacioattri donde ponemomos dentro la variavle de la población actual
echo "
<td><select name='RE_Prov' id=\"provincia\" poblacioattri='$RE_pobla'>
<option value=''>Seleccione provincia</option>";
$B_BUSCAR= mysql_query ("SELECT * FROM provincias order by provincia asc",$link);
$R_BUSCAR=mysql_fetch_assoc($B_BUSCAR);
$C_BUSCAR=mysql_num_rows($B_BUSCAR);
$suma=0;
do{ ++$suma;
echo "<option value='".$R_BUSCAR['id']."'";if($RE_Prov==$R_BUSCAR['id']){echo " selected='true'";}echo ">".$R_BUSCAR['provincia']."</option>";
}while($R_BUSCAR=mysql_fetch_assoc($B_BUSCAR));
echo "</select> <span id='Buscando'></span></td>
</tr>
<tr>
<td>Población</td>
<td><select name='RE_pobla' id=\"poblacionList\">
<option value='' selected='selected'>Seleccionar población</option>
</select></td>
</tr>
<tr>
<td></td>
<td><input type=\"hidden\" name=\"MOD_ID\" value=\"".$_GET["id"]."\" /><input type=\"submit\" /></td>
</tr>
</tbody>
</table>
</form>";
}
?>
?>

Ponemos el script donde si que recuperamos el atributo poblacioattri y la forma de recuperarlo es así:

Y modificamos:

if($_POST["nombre"]){
$nombre=addslashes($_POST["nombre"]);
$RE_Prov=addslashes($_POST["RE_Prov"]);
$RE_pobla=addslashes($_POST["RE_pobla"]);

$mod=mysql_query("UPDATE clientes SET nombre='$nombre',provincia='$RE_Prov',poblacion='$RE_pobla' WHERE id=".$_POST["MOD_ID"]."",$link);
if ($mod==1){echo "<script>alert(\"Se ha Modificado.\");</script>";}else{echo "<script>alert(\"Error!!!!.\");</script>";}
}
?>

y cerramos :

</body>
</html>

Eduard Nebot

Manual

Taller de PHP

Desactivar funciones PHP