lunes, 10 de diciembre de 2012

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

15 comentarios:

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

    ResponderEliminar
    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!

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

      Eliminar
  2. simplemente maravilloso ese tu codigo gracias

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

    ResponderEliminar
  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'

    ResponderEliminar
  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

    ResponderEliminar
  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 ??

    ResponderEliminar
  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

    ResponderEliminar
  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

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

    ResponderEliminar
  10. Estas bien pendejo, ese codigo es basura

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

    ResponderEliminar