martes, 2 de junio de 2015

Aparecer datos en las cajas de texto con Ajax

Primero el formulario:


<head>
<script type="text/javascript" src="requestname.js"/>
</head>
<body>
...
<input class="q" type="text" name="cod" id="cod" onkeyup="sendRequest(this.value);" />
//onkeyup llama a la petición asincrónica. Puede ser onSelect o onChange si es un combo box...
<div id="descr"></div>
//Importante aquí el nombre(id) del DIV.
...
</body>

Ahora el "requestname.js":

function
createRequestObject () {
var request;
try {
request = new
XMLHttpRequest;
} catch (microsoft) {
try {
request = new
ActiveXObject("Msxml2.XMLHTTP");
} catch (old_microsoft) {
try
{
request = new ActveXObject("Microsoft.XMLHTTP");
} catch (failed)
{
request =false;
alert("Error iniciando la petición al
Servidor!");
}
}
}
return request;
}
// Crea el objeto
XMLHttpRequest
var http = createRequestObject();

function
sendRequest(q) {
// Abre el script PHP de la consulta
'nombre'
http.open('get', 'infoprod.php?cod='+q);

http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4 &&
http.status == 200){
// Text returned FROM the PHP script
var
response = http.responseText;
if(response) {
// UPDATE ajaxTest
content
document.getElementById("descr").innerHTML = response;
}

}
}
Y por último el "infoprod.php", que busca en la BD: (por cierto, es en postgresql)

<?php
include_once('config.php');
pg_connect($bd_url);

if(isset($_GET['cod']))
{
$searchString = $_GET['cod'];
if($searchString != NULL)
{
$consulta = pg_query("SELECT descripcion,existencias FROM productos
WHERE codigo = '".$searchString."';");
if(pg_num_rows($consulta) >
0)
{
$nombre=pg_fetch_result($consulta,0,0);
$existencias=pg_fetch_result($consulta,0,1);
echo
'<h3>Producto:<br />'.$nombre.'</h3>';
echo
'<h3>Existencias:&nbsp;&nbsp;&nbsp;&nbsp;'.number_format($existencias,2,'.','
').' kg</h3>';
}
else if (trim($_GET['cod'])!='') {echo
'Código inexistente';}
else {
echo '<h3> </h3>';
echo
'<h3> </h3>';
}
}
}
?>

Bueno y eso debe funcionar: al escribir se produce un evento que dispara el request.js y hace que busque en la base de datos usando php teniendo como parámetro el texto escrito; el resultado se escribe en el DIV con el id especificado.

No hay comentarios.:

Publicar un comentario