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
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
Lo siento pero solo se queda en el mensaje de cargando... de hay no pasa. a que se debe?
ResponderBorrarYo 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:
Borrar$liga = $_POST[cod_banda];
$res=mysql_query("select * from $liga",$con);
Abrazo!
que le pusiste aca
Borrarphp while($fila=mysql_fetch_array($res))
BorrarHe revisado y funciona bien.
ResponderBorrarsimplemente maravilloso ese tu codigo gracias
ResponderBorrarmuchas Gracias me has salvado, una duda como seria con 2 combobox dependientes
ResponderBorrar: 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'
ResponderBorrarBuena 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
ResponderBorrarJoan Navarro
hola muy bueno el codigo y estoy intentando hacer con dos select
ResponderBorrar$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 ??
como seria para poder dos select, e intentado lo siguiente
ResponderBorrarfunction 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
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
ResponderBorrarbueno,pero no me sirvió de mucho
ResponderBorrarEstas bien pendejo, ese codigo es basura
ResponderBorrarMuchas gracias!!! me ha funcionado perfectamente..
ResponderBorrarasco
ResponderBorrar