Hola a todos la comunidad de FOROS DEL WEB, le escribo por la siguiente duda que me ha surgido, soy nuevo en AJAX y voy aprendiendo poco a poco, les explicare mi problema y les mostrare el codigo.
Tengo un formulario donde escribo el codigo del producto y me muestra la informacion del producto que corresponde al codigo ingresado, por ese la todo bien, la informacion me la esta mostrando en div correctamente sin recargar la pagina, el problema es que quiero ocultar el DIV y que cuando ingrese el codigo y le de al boton buscar me aparezca el DIV con la informacion y asi mismo que se pueda cerrar el DIV despues de haber visto la informacion.
Espero haberme explicado bien. aqui les dejare el codigo que estoy usando:
consultar_inventario.php Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Consultas de Inventario</title>
<link rel="stylesheet" type="text/css" href="css/estilos.css" />
<!--<script language="JavaScript" type="text/javascript" src="js/ajax.js"></script>-->
<script language="JavaScript" type="text/javascript" src="js/consultar_productos.js"></script>
<style>
#detalles {
margin: 20px;
border: 1px solid #F0F0F0;
padding: 10px;
font-size: 10px;
}
</style>
</head>
<body>
<?php
include("conex.php");
$escala = mysql_query ('SELECT esc_codigo FROM dpescalas');
//$consulta1 = mysql_query ('select mar_descri from dpmarcas');
?>
<fieldset id="inventario" >
<!--<table width="400" border="0" align="center">
<tr>-->
<th scope="row" align="center" ><legend>CONSULTAR INVENTARIO</legend></th>
<!--</tr>
</table>-->
<table width="400" border="0" align="center">
<tr>
<form name="formulario1" action="" onsubmit="enviarCodigoProducto(); return false" >
<th width="82" scope="row" bordercolor="#F0F0F0" class="fondo"><label>Código:</label></th>
<td colspan="6" align="center" bgcolor="#CCCCCC"><input name="codbusqueda" type="text" value="" size="20" maxlength="55" title="Código del Producto" class="inputboxInicio" /><br/></td>
<tr>
<!--<td colspan="3" align="center" bordercolor="#F0F0F0" bgcolor="#0099CC">
<label><strong> Marcas: </strong></label>
<td width="130" bgcolor="#CCCCCC">
<label> Código: </label>
</td>
<td width="41">
<select name = "codigo" title="Código de Marca">
<?php
while ($resultado = mysql_fetch_array($consulta))
{
echo "<option value={$resultado[mar_codigo]}>{$resultado[mar_codigo]}</option>";
}
mysql_free_result($consulta);
?>
</select>
</td>
<td width="153" bgcolor="#CCCCCC"><label>Descripción: </label>
</td>
<td width="48">
<select name = "descripcion" title="Descripcion de Marca">
<?php
while ($resultado1 = mysql_fetch_array($consulta1))
{
echo "<option value={$resultado1[mar_descri]}>{$resultado1[mar_descri]}</option>";
}
mysql_free_result($consulta1);
?>
</select>
</td> -->
</tr>
<tr>
<td colspan="7" bgcolor="#CCCCCC"><div align="right"> <input name="buscar" type="submit" value="Buscar" class="boton" /></div></td>
</tr>
</form>
</tr>
</table>
<div id="consultar_productos">
<?php include('consultar.php'); ?>
</div>
</fieldset>
<fieldset id="existencias" >
<!--<table width="400" border="0" align="center">
<tr>-->
<th scope="row" align="center" ><legend>CONSULTAR EXISTENCIAS EN INVENTARIO</legend></th>
<!--</tr>
</table>-->
<table width="400" border="0" align="center">
<tr>
<form name='existecia' method='post' action='consultarExistencias.php' >
<th width="150" scope="row" bordercolor="#F0F0F0" class="fondo"><label>Código del Producto:</label></th>
<td colspan="6" align="center" bgcolor="#CCCCCC"><input name="busqueda" type="text" value="" size="20" maxlength="55" title="Código del Producto" class="inputboxInicio" /><br/></td>
<tr>
<td colspan="3" align="center" bordercolor="#F0F0F0" class="fondo">
<label><strong> Escalas: </strong></label>
<td width="139" bgcolor="#CCCCCC">
<label> Código: </label>
</td>
<td width="41">
<select name = "escala" title="Código de Escala">
<?php
while ($resultado = mysql_fetch_array($escala))
{
echo "<option value={$resultado[esc_codigo]}>{$resultado[esc_codigo]}</option>";
}
mysql_free_result($escala);
?>
</select>
</td>
<!-- <td width="153" bgcolor="#CCCCCC"><label>Descripción: </label>
</td>
<td width="48">
<select name = "descripcion" title="Descripcion de Marca">
<?php
while ($resultado1 = mysql_fetch_array($consulta1))
{
echo "<option value={$resultado1[mar_descri]}>{$resultado1[mar_descri]}</option>";
}
mysql_free_result($consulta1);
?>
</select>
</td> -->
</tr>
<tr>
<td colspan="7" bgcolor="#CCCCCC"><div align="right"> <input name="buscar" type="submit" value="Buscar" class="boton" /></div></td>
</tr>
</form>
</tr>
</table>
</fieldset>
</body>
</html>
consultar_productos.js
Código Javascript
:
Ver originalfunction objetoAjax(){
var xmlhttp=false;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function enviarCodigoProducto(){
//donde se mostrará lo resultados
divResultado = document.getElementById('consultar_productos');
//valores de los inputs
codbusqueda=document.formulario1.codbusqueda.value;
//instanciamos el objetoAjax
ajax=objetoAjax();
ajax.open("POST","consultar.php",true);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divResultado.innerHTML = ajax.responseText
LimpiarCampos();
}
}
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("&codbusqueda="+codbusqueda)
}
function LimpiarCampos(){
document.formulario1.codbusqueda.value="";
document.formulario1.codbusqueda.focus();
}
Ahi estan los 2 archivos que estoy usando para hacer proceso.
Ya les envio el archivo donde se hace la consulta
P.D.: De que manera me sugieren validar mis campos con AJAX?
Saludos, espero pueda ayudarme.