Cierta parte de mi aplicacion trata de Agregar Productos a la BDD, para esto el formulario es cargado desde el mismo INDEX.PHP, de modo que parte importante del formulario es poder ubicar en una sección de alguna Categoria existente, he aqui donde entra la ayuda de AJAX.
Basicamente AJAX me ayudara a generar rapidamente (sin refrescar la hoja) un nuevo select en donde estaran las Secciones, para esto en el select de las Categorias colocare la funcion de ajax mediante onchange. Esto no me trae ningun problema, ya que una vez seleccionada la Categoria del select, inmediatamente se carga otro select con las Secciones correspondientes a dicha Categoria elejida.
El Problema surge al enviar el formulario (presionar el botn enviar), este boton realiza una accion del formulario enviando todo hacia la direccion index.php?id=productos&mov=agregar_producto, vaya esto ya es puro PHP, AJAX solo nos ayudo a generar el SELECT de Secciones, asi que, al momento de ir a agregar_producto, no logro recepcionar el contenido del select generado con ajax.
Basicamente aqui utilizo dos select que son: Categorias y Secciones, la variable donde porto el contenido de Categorias es categoria_productos y la variable donde porto las Secciones son: seccion_producto.
De modo que $_POST["seccion_producto"] no se genera o nose que sucede :S, pero no obtengo el valor de dicha variable.
Utilizo Gentoo Linux, Apache y Firefox-3.
Para una mejor ilustracion aqui dejo mi codigo resumido:
INDEX.PHP
Código:
<?php
switch( $_GET["mov"] )
{
case 'agregar_producto':
echo "Categoria: ". $_POST["categoria_producto"];
echo "<br>sección: ". $_POST["seccion_producto"];
echo "<br>POST: ". count($_POST);
echo "<br>";
print_f($_POST);
break;
default:
echo "<form action=\"index.php?id=". $_GET["id"]. "&mov=agregar_producto\" method=\"POST\" enctype=\"multipart/form-data\">";
echo "<div id=\"formulario_producto_nuevo\">";
echo "Tipo de Prod.: <input type=\"radio\" name=\"tipo_producto\" value=\"1\" checked onclick=\"cargar_datos( 'id=". $_GET["id"]. "&mov=agregar_producto', 'formulario_producto_nuevo_lista', 'GET', '0' );\"> Normal";
echo "<input type=\"radio\" name=\"tipo_producto\" value=\"2\" onclick=\"cargar_datos( 'id=". $_GET["id"]. "&mov=agregar_producto&ver=1', 'formulario_producto_nuevo_lista', 'GET', '0' );\">Kit<br>";
echo "ID: <input type=\"text\" name=\"id_producto\"><br>";
echo "Cantidad: <input type=\"text\" name=\"cantidad_producto\" style=\"width:50px;\"> ";
echo "<select name=\"unidad_medida_producto\" style=\"width:120px;\">";
echo "<option value=\"error\"></option>";
$cons= consultar_enorden( "UNIDADES_MEDIDA", "ID" );
while( $buf= mysql_fetch_array($cons) )
echo "<option>". $buf["NOMBRE"]. "/". $buf["NOTACION"]. "</option>";
unset($buf);
unset($cons);
echo "</select>";
echo "<br>";
echo "Nombre del Prod.: <input type=\"text\" name=\"nombre_producto\"><br>";
echo "Precio Publico: <input type=\"text\" name=\"preciopublico_producto\"><br>";
echo "Categoria: <select name=\"categoria_producto\" onchange=\"cargar_datos( 'id=". $_GET["id"]. "&mov=mostrar_secciones&categoria_id='+this.value, 'mostrar_secciones', 'GET', '0' );\">";
echo "<option value=\"error\"></option>";
$cons= consultar_enorden( "MENUS", "ID" );
while( $buf= mysql_fetch_array($cons) )
echo "<option value=\"". $buf["ID"]. "\">". $buf["NOMBRE"]. "</option>";
unset($buf);
unset($cons);
echo "</select>";
echo "<div id=\"mostrar_secciones\"></div>";
echo "Descripcion:<br>";
echo "<textarea name=\"descripcion_producto\"></textarea><br>";
echo "<span style=\"font-size:10px;\">Solo se permite adjuntar imagenes: <b>*.jpg</b>, <b>*.png</b> y <b>*.gif</b>.</span>";
echo "<div id=\"formulario_producto_nuevo_imagenes\">";
echo "<input type=\"file\" name=\"imagen_productos01\" style=\"font-size:9px;\">";
echo "<input type=\"file\" name=\"imagen_productos02\" style=\"font-size:9px;\">";
echo "</div>";
echo "</div>";
echo "<div id=\"formulario_producto_nuevo_lista\">";
echo "</div>";
echo "<center>";
echo "<input type=\"submit\" value=\"Guardar Producto\" style=\"text-align:center;border:solid 1px black;font-family:verdana;font-size:12px;font-weight:bold;\">";
echo "</center>";
echo "</form>";
break;
}
?>
AJAX.PHP
Código:
<?php
/*####################################
###### MOSTRAR SECCIONES #####
## Muestra secciones en capa ##
######################################*/
else if( !strcmp( $_GET["mov"], "mostrar_secciones") )
{
$xcons= consultar_con( "MENUS", "ID='". $_GET["categoria_id"]. "'" );
$xbuf= mysql_fetch_array($xcons);
unset($xcons);
$cons_sec= consultar_enorden_con( "SECCIONES", "RELACION='". $xbuf["NOMBRE"]. "'", "ID" );
unset($xbuf);
echo "Secciones: <select name=\"seccion_producto\">";
echo "<option value=\"error\"></option>";
while( $buf_sec= mysql_fetch_array($cons_sec) )
echo "<option value=\"". $buf_sec["ID"]. "\">". $buf_sec["NOMBRE"]. "</option>";
echo "</select>";
unset($buf_sec);
unset($cons_sec);
}
?>
SCRIPT.js
Código:
//Funcion para obtener conector AJAX
function ajax()
{
var pagina=false; //conector ajax
if( window.XMLHttpRequest ) //Navegador Firefox
pagina= new XMLHttpRequest(); //creamos objeto para el navegador
else if( window.ActiveXObject ) //Navegador Internet Explorer
{
try //Version Actual
{
pagina= new ActiveXObject( "Msxml2.XMLHTTP" ); //creamos objeto para el navegador
}
catch(e) //version Antigua
{
try
{
pagina= new ActiveXObject( "Microsoft.XMLHTTP" ); //creamos objeto para el navegador
}
catch(e)
{
}
}
}
return pagina;
}
function cargar_datos( vars, capaview, flujoddatos, varsform )
{
var conector, capa, url;
url= 'ajax.php'; //mis funciones para ajax
capa= document.getElementById(capaview);
conector= ajax();
conector.open( flujoddatos, url+'?'+vars, true );
conector.onreadystatechange= function()
{
if( conector.readyState==1 )
{
capa.innerHTML= "<center><img src='../admin/imagenes/loading.gif'><br><b>CARGANDO...</b></center>";
}
else if( conector.readyState==4 )
{
if( conector.status==200 )
{
if( varsform!=0 )
conector.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
capa.innerHTML= conector.responseText;
}
else if( conector.status==404 )
{
capa.innerHTML= "La pagina que intentas cargar no existe...";
}
else
{
capa.innerHTML= conector.status;
}
}
}
//conector.setRequestHeader( "Content-Type", "multipart/form-data" );
if( varsform!=0 )
{
var myarr= varsform.split(':'); //dividimos
var trama="";
var i=0;
for( i=0; i<(myarr.length); i++ )
{
if( i>0 )
trama += "&";
trama += myarr[i]+"="+document.getElementById(myarr[i]).value;
}
alert(trama);
conector.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
conector.send(trama);
}
else
conector.send(null);
}
