Después que te explique como es la forma de trabajar te voy a pegar el código mas o menos que hace lo que pediste para poder orientarte. El código hice los posible para adaptar con el tuyo porque he visto como le llama a los campo los id el formulario la base de datos no es la forma correcta te conviene llamar por su nombre no tan abreviado. Pero de modo de ejemplo yo le llame como vos le llamaste.
Este es el index.php
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Ejemplo</title>
<link href="css/style10.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<center>
<form id="cdr" >
<h3>REUBICACIONES</h3>
<p>
<input name="busca" type="text" id="busca">
<input id="buscar" type = 'button' value="buscar" />
<!--<input class="input" id = "botonEnviar" type = 'button' value = 'Enter>-->
</p>
</form>
</center>
<table class="table1" style="width:100%" border="2" >
<thead>
<tr>
<th>ID</th>
<th>OFICIO</th>
<th>MOVIMIENTO</th>
</tr>
</thead>
<tbody id="contenido">
</tbody>
</table>
<p> </p>
<br>
<script src="js/jquery.min.js" type="text/javascript"></script>
<script src="js/funciones.js" type="text/javascript"></script>
<script>
$("#buscar").on('click', function () {
buscar();
//alert("hola");
});
</script>
</body>
</html>
Como veras uso jquery que es un plugins de javaScript que podes descargar de internet.
Los estilos para enlazar se tiene que hacer en le head y solo una vez se escribe el head no repetido como los otros.
clases es una carpeta donde va las conexiones y la clase php
conexion con base de datos
<?php
// clase que se llama mysql
class mysql {
// attributos
private $servidor = "localhost";
private $usuario = "root";
private $password = "tu contraseña";
private $database = "red";
// metodos (funciones)
public function conectar() {
if (!isset($this->conexion)) {
$this->conexion = (mysqli_connect($this->servidor, $this->usuario, $this->password)) or die(mysqli_error());
mysqli_select_db($this->conexion, $this->database) or die(mysqli_error());
mysqli_set_charset($this->conexion, 'utf8');
}
}
public function consulta($query) {
$resultado = mysqli_query($this->conexion, $query);
if (!$resultado) {
echo 'MySQL Error: ' . mysqli_error();
exit;
}
return $resultado;
}
}
clase f11 donde van las consulta
<?php
require_once 'mysql.class.php';
// 5. listar los productos accediendo a la base de datos y generando el componente (card)
class f11 extends mysql {
public function __construct() {
$this->conectar();
}
public function buscar($buscar) {
$sql = "SELECT * FROM f11 " .
"where id = '" . $buscar . "'";
$rs = $this->consulta($sql);
$registros = "";
while ($row = mysqli_fetch_array($rs, MYSQLI_ASSOC)) {
$registros .= '<tr>';
$registros .= '<td>' . $row["id"] . '</td>';
$registros .= '<td>' . $row["oficio"] . '</td>';
$registros .= '<td>' . $row["movimiento"] . '</td>';
$registros .= '</tr>';
}
$arr = array('registros' => $registros);
return ($arr);
}
}
?>
php es otra carpeta donde van los codigo php
<?php
require_once '../clases/f11.class.php';
$buscar = $_POST['busca'];
error_log("--> " . $buscar);
$f11 = new f11();
$arr = $f11->buscar($buscar);
echo json_encode($arr);
?>js es una carpeta donde va los codigo javaScript
function buscar() {
var datos_formulario = $('#cdr').serialize();
//console.log("--> "+datos_formulario);
$.ajax({
type: 'POST',
url: 'php/buscar.php',
data: datos_formulario,
dataType: 'json',
beforeSend: function (objeto) {
},
success: function (json) {
$("#contenido").html(json.registros);
},
error: function (e) {
alert("No se puedo conectar al servidor");
},
complete: function (objeto, exito, error) {
}
});
}
Como veras utilizo ajax para que no se vaya a recargar las pagina cada vez que haga una consulta.
Tema: HTML PHP MySQl Buscador con combobox que despliegue información de base datos (Leído 20449 veces)
RSS -
WAP2