Ir al contenido principal

Mostrar datos en una tabla desde un select PHP + MySQL + AJAX

Lo que se hará es que el usuario al seleccionar una opción de la lista desplegable se muestre en una tabla información detallada de la opción escogida. Con AJAX se elimina el uso del botón.

conexion.php


<?php

function conexion(){

$con = mysql_connect("localhost","root","");

if (!$con){

die('Could not connect: ' . mysql_error());
}

mysql_select_db("database", $con);

return($con);

}

?>


En el archivo principal, está la función JavaScript mostrarInfo() que se ejecuta cuando el usuario hace click en una opcion del select. Recibe como parámetro el codigo de un registro, para que a través del método POST el archivo proceso.php haga la consulta a la base de datos. Los registros cargados en select estan de forma estática (sin MySQL).

index.php


<!DOCTYPE html>
<html>
<head>

<script>

function mostrarInfo(cod){

if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("datos").innerHTML=xmlhttp.responseText;
}else{
document.getElementById("datos").innerHTML='Cargando...';
}
}
xmlhttp.open("POST","proceso.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("cod_banda="+cod);

}

</script>

</head>
<body>

<form>

<select onchange="mostrarInfo(this.value)">
<option value="">Seleccione</option>
<option value="1">The Speakers</option>
<option value="2">The Doors</option>
<option value="3">The Rolling Stones</option>
<option value="4">Los Shakers</option>
</select>

</form>

<div id="datos"></div>

</body>
</html>


El codigo que nos envían desde index.php se almacena en la variable cod_banda. Este archivo lo que hace es capturarla y hacer la query a la base de datos. La información se muestra en una tabla y es lo que se va a visualizar en la página principal sin recargar la página entera.

proceso.php


<?php

include 'conexion.php';

$con=conexion();

$res=mysql_query("select * from grupo_artista where codigo='".$_POST[cod_banda]."'",$con);

?>

<table border="1">

<tr>
<th>Codigo</th>
<th>Banda</th>
<th>Genero</th>
<th>Origen</th>
</tr>

<?php while($fila=mysql_fetch_array($res)){ ?>

<tr>
<td><?php echo $fila[codigo]; ?></td>
<td><?php echo $fila[nombre]; ?></td>
<td><?php echo $fila[genero]; ?></td>
<td><?php echo $fila[pais]; ?></td>
</tr>

<?php } ?>

</table>

<?php mysql_close($con); ?>


Demo/código fuente

Comentarios

  1. Lo siento pero solo se queda en el mensaje de cargando... de hay no pasa. a que se debe?

    ResponderBorrar
    Respuestas
    1. Yo lo acabo de probar y funciona perfecto, yo lo que queria era que muestre una tabla completa y no una fila segun el id... entonces modifique esto:

      $liga = $_POST[cod_banda];

      $res=mysql_query("select * from $liga",$con);


      Abrazo!

      Borrar
    2. php while($fila=mysql_fetch_array($res))

      Borrar
  2. simplemente maravilloso ese tu codigo gracias

    ResponderBorrar
  3. muchas Gracias me has salvado, una duda como seria con 2 combobox dependientes

    ResponderBorrar
  4. : no m salio Hice todo tal cual descarge el codigo puse la base de datos, tal cual la llame database pero m salio esto Use of undefined constant cod_banda - assumed 'cod_banda'

    ResponderBorrar
  5. Buena noche, muy buen código, solo una pregunta como hago para desde proceso.php llevar una variable a index.php es para hacer una factura con este codigo, gracias

    Joan Navarro

    ResponderBorrar
  6. hola muy bueno el codigo y estoy intentando hacer con dos select
    $select1 = $_POST[cod];
    $select2 = $_POST[nombre];
    $res=mysql_query("select ruta from img where cod=$select1 and nombre=$select2",$con);

    la verdad no me esta funcionando, :( alguna idea como resolverlo ??

    ResponderBorrar
  7. como seria para poder dos select, e intentado lo siguiente

    function mostrarInfo(variable, cod){
    if (window.XMLHttpRequest)
    {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
    }
    else
    {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("datos").innerHTML+=xmlhttp.responseText;
    }else{
    document.getElementById("datos").innerHTML='Cargando...';
    }
    }
    xmlhttp.open("POST","conexion/cons_report2.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send(variable + "=" + cod);
    }



    y dos select pero siempre al seleccionar el segundo borra la primera variable

    ResponderBorrar
  8. como puedo cambiar el select por un input en el cual se pueda poner el id de la banda ?? excelente codigo, em funcionó a la perfeccion

    ResponderBorrar
  9. bueno,pero no me sirvió de mucho

    ResponderBorrar
  10. Estas bien pendejo, ese codigo es basura

    ResponderBorrar
  11. Muchas gracias!!! me ha funcionado perfectamente..

    ResponderBorrar

Publicar un comentario

Entradas más populares de este blog

Buscador en tiempo real con AJAX, PHP y MySQL

Buscador realizado en HTML utilizando como lenguaje de programación PHP , la tecnología AJAX y a MySQL como motor de base de datos.

Funciones (subprocesos) en PSeInt

A partir de la version 20121010 (10/Octubre/2012) PSeInt permite la posibilidad de definir funciones al que el creador del mismo bautizó como subprocesos , en este tutorial explicaremos brevemente cómo se tratan dichas funciones. Para empezar una función no es más que un bloque de código con un determinado fin o propósito, podemos definir más de una y nos permiten ahorrar líneas código si nuestros programas son muy extensos o hay codificación redundante.

Convertir un decimal a binario en PSeInt

Utilizaremos el siguiente método para convertir números decimales a binarios (números que se sólo se componen de unos y ceros). El método es sencillo, consiste en dividir el número decimal entre dos, despues su cociente entre el mismo número y así sucesivamente hasta que finalmente el cociente (que se convierte en un divisor) sea igual a uno. Despúes organizamos los residuos desde el último al primero para obtener el número binario que buscamos.