Hola:
Fácil: jQuery (o Javascript).
Lo que debes hacer es anclar un evento "onchange" al select utilizando jQuery. Para ello, primero que nada debes incluir jQuery en el archivo que tiene el código HTML (en la cabecera - head):
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
Luego debes escribir el código:
<script type="text/javascript">
$(document).ready(function() {
$('#user').change(function(e) {
var err = '<p class="error"></p>';
var usr = $(this).val();
// Ajax se utiliza para enviar datos al servidor y obtener una respuesta sin necesidad de recargar la página
$.ajax({
url: 'http://misitioweb.com/get_user.php', // La url del archivo que extraerá los datos de la base de datos (valga la redundancia).
type: 'post', // Type puede ser post o get
data: {'usuario': usr}, // Data es un arreglo clave valor: 'nombre': 'valor', 'nombre1': 'valor' ...
dataType: 'json', // El tipo de datos devueltos por el servidor (aquí aparecen los distintos valores: http://api.jquery.com/jQuery.ajax/ - busca dataType).
beforeSend: function() {
// Aquí generalmente se pone un mensaje de "cargando"
},
success: function(data) { // Aquí, data es la información extraída del servidor.
// Solo resta mostrar la información devuelta por el servidor
if(console && console.log)
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown) {
$('body').remove('p.error'); // Esto eliminará todos los párrafos de clase 'err'
$('body').append(err).hide();
$('p.err').text(jqXHR + '<br />' + textStatus + '<br />' + errorThrown).show();
}
});
});
});
</script>
Lo anterior funciona, solo hay un problema. En la función
success hay que llenar los campos del formulario con la información que devolvió el servidor, pero la forma en la que devuelve los datos el servidor es el problema pues no hay forma de que javascript entienda un array como lo hace PHP.
La solución es que al devolver los datos (desde el archivo get_user.php) lo haga en formato json (JavaScript Object Notation) con la función
json_encode().
Supongamos que tu archivo get_user.php es este:
<?php
$user = $_POST['usuario']; // Debe ser el mismo nombre que pusiste en data (en la parte del <script>)
// omitiré la conexión a la base de datos...
$query = "SELECT * FROM tabla_usuarios WHERE usuario = '$user'";
$result = mysql_query( $query );
if( $result ) {
// Solo debería extraer una fila si la base de datos esta bien hecha
$arr = mysql_fetch_array( $result, MYSQL_ASSOC );
$json = json_encode( $arr );
if( $json !== false ) { // Si es distinto de false, entonces se codificó
echo $json;
} else {
echo "No se pudo codificar como json";
}
} else {
echo "No hubieron resultados - " . mysql_error();
}
?>
La "desventaja" de este método es que el servidor DEBE tener PHP 5.3 o superior, de lo contrario
json_encode no estará disponible. También podrías utilizar html o xml para extraer la información, pues PHP tiene soporte para estos en versiones anteriores.
Asumiendo que tu base datos tuviera, al menos, las columnas 'nombre_usuario' e 'email', entonces la consola del navegador te mostraría esto:
Object
nombre_usuario: 'nombre del usuario',
email: 'algo@dominio'
// y otras cosas más, pero lo anterior es lo importante.
La consola del navegador en google chrome aparece con Control + Shift + i en la pestaña 'Console'. Ahora, la información se accede así:
// ... omito el resto del script, pues está arriba
success: function(data) {
console.log(data.nombre_usuario); // Mostrará el nombre del usuario
console.log(data.email); // Mostrará el email
// Si sabes algo de javascript, entenderás que se accede como a cualquier objeto: data.indice dará el valor (indice también podría ser un array, así que cuidado).
}
Espero que te sirva, saludos :D.
