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>
Código Javascript:
Ver original
function 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.