Comunidad de diseño web y desarrollo en internet online

Problema para manejar variables con AJAX y PHP en formulario

Citar            
MensajeEscrito el 11 Ago 2008 08:49 pm
Que tal, tengo un formulario el cual es generado por PHP, la idea es que una vez se llene el formulario con datos, se invoce una funcion en modo onsubmit="enviar_datos();", la cual es un AJAX que recivira los datos y los insertara.

El problema es que no logro pasarle todas las variables :S !!...

Aqui pongo mi codigo:

INDEX.PHP
[code=php]<?php
echo "<div id=\"tabla_mensajeria\">";
echo "<div id=\"tabla_mensajeria_minipanel\">";
echo "<ul>";
echo "<li><a href=\"index.php?id=". $_GET["id"]. "&mov=redactar\">Redactar</a></li>";
echo "</ul>";
echo "</div>";

echo "<div id=\"tabla_mensajeria_area\">";
if( !strcmp( $_GET["mov"], "redactar" ) )
{
echo "<form action=\"#\" name=\"formulario\" method=\"POST\" onsubmit=\"cargar_datos( 'id=". $_GET["id"]. "&mov=". $_GET["mov"]. "', 'tabla_mensajeria_area', 'POST' );\">";
echo "Usuario: <input type=\"text\" name=\"mensajeria_usuario\" id=\"mensajeria_usuario\"><br>";
echo "Asunto: <input type=\"text\" name=\"mensajeria_asunto\" id=\"mensajeria_asunto\" style=\"width:500px;\"><br>";
echo "<div id=\"mensajeria_adjuntar_archivos\"><a href=\"#\" onclick=\"cargar_datos( 'id=". $_GET["id"]. "&mov=adjuntar_archivos', 'mensajeria_adjuntar_archivos', 'GET' );\">Adjuntar Archivo?</a></div>";
echo "<textarea name=\"mensajeria_msg\" id=\"mensajeria_msg\" style=\"font-size:12px;width:600px;height:300px;\"></textarea>";
echo "<center><input type=\"submit\" value=\"Enviar Mensaje\" name=\"boton\">";
echo "<input type=\"submit\" value=\"Guardar en Borradores\" name=\"boton\"></center>";
echo "</form>";
}
else
{
echo "<center>..:: Bienvenido a tu Sistema de Mensajeria ::..</center>";
echo "<br><p>Si deseas algun tipo de ayuda o soporte tecnico personalizado, por favor comunicate con nosotros enviandonos un ";
echo "Mensaje Privado al usuario <b>SoporteTecnico</b></p>";
echo "<br><p>Si deseas informacion sobre servicios, manuales de uso (documentos PDF o impresos), renta de servicios adicionales, publicidad";
echo " u otros, comunicate enviando un Mensaje Privado al usuario <b>Servicios</b></p>";
echo "<br><p align=\"center\">SIE-Group :: Grupo de Soluciones Inteligentes para tu Empresa</p>";
}
echo "</div>";

echo "</div>";[/code]

SCRIPT.js
[code=javascript]function cargar_datos( vars, capaview, flujoddatos )
{
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 )
{
capa.innerHTML= conector.responseText;
}
else if( conector.status==404 )
{
capa.innerHTML= "La pagina que intentas cargar no existe...";
}
else
{
capa.innerHTML= conector.status;
}
}
}
conector.send(null);
}[/code]


AJAX.PHP
[code=php]<?php
/*
######################################
## Funciones para Mensajeria ##
######################################*/
if( !strcmp( $_GET["id"], "mensajeria") )
{
/* ####################################
## Funciones para Bandeja Msg. ##
######################################*/

if( !strcmp( $_GET["mov"], "redactar" ) )
{
echo "Enviaste formulario...<br>";
echo "Usuario: ". $_POST["mensajeria_usuario"]. "/". $_GET["mensajeria_usuario"]. "<br>";
if( isset($_POST["mensajeria_usuario"]) ) echo "Si se creo...";
else echo "No se creo...";
}
}
?>[/code]

Por Diabliyo

9 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 11 Ago 2008 08:51 pm
Que tal, tengo un formulario el cual es generado por PHP, la idea es que una vez se llene el formulario con datos, se invoce una funcion en modo onsubmit="enviar_datos();", la cual es un AJAX que recivira los datos y los insertara.

El problema es que no logro pasarle todas las variables :S !!...

Aqui pongo mi codigo:

INDEX.PHP

Código :

<?php
   echo "<div id=\"tabla_mensajeria\">";
      echo "<div id=\"tabla_mensajeria_minipanel\">";
         echo "<ul>";
            echo "<li><a href=\"index.php?id=". $_GET["id"]. "&mov=redactar\">Redactar</a></li>";
         echo "</ul>";
      echo "</div>";

   echo "<div id=\"tabla_mensajeria_area\">";
   if( !strcmp( $_GET["mov"], "redactar" ) )
      {
      echo "<form action=\"#\" name=\"formulario\" method=\"POST\" onsubmit=\"cargar_datos( 'id=". $_GET["id"]. "&mov=". $_GET["mov"]. "', 'tabla_mensajeria_area', 'POST' );\">";
      echo "Usuario: <input type=\"text\" name=\"mensajeria_usuario\" id=\"mensajeria_usuario\"><br>";
      echo "Asunto: <input type=\"text\" name=\"mensajeria_asunto\" id=\"mensajeria_asunto\" style=\"width:500px;\"><br>";
      echo "<div id=\"mensajeria_adjuntar_archivos\"><a href=\"#\" onclick=\"cargar_datos( 'id=". $_GET["id"]. "&mov=adjuntar_archivos', 'mensajeria_adjuntar_archivos', 'GET' );\">Adjuntar Archivo?</a></div>";
      echo "<textarea name=\"mensajeria_msg\" id=\"mensajeria_msg\" style=\"font-size:12px;width:600px;height:300px;\"></textarea>";
      echo "<center><input type=\"submit\" value=\"Enviar Mensaje\" name=\"boton\">";
      echo "<input type=\"submit\" value=\"Guardar en Borradores\" name=\"boton\"></center>";
      echo "</form>";
      }
   else
      {
      echo "<center>..:: Bienvenido a tu Sistema de Mensajeria ::..</center>";
      echo "<br><p>Si deseas algun tipo de ayuda o soporte tecnico personalizado, por favor comunicate con nosotros enviandonos un ";
      echo "Mensaje Privado al usuario <b>SoporteTecnico</b></p>";
      echo "<br><p>Si deseas informacion sobre servicios, manuales de uso (documentos PDF o impresos), renta de servicios adicionales, publicidad";
      echo " u otros, comunicate enviando un Mensaje Privado al usuario <b>Servicios</b></p>";
      echo "<br><p align=\"center\">SIE-Group :: Grupo de Soluciones Inteligentes para tu Empresa</p>";
      }
   echo "</div>";
   
   echo "</div>";


SCRIPT.js

Código :

function cargar_datos( vars, capaview, flujoddatos )
   {
   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 )
            {
            capa.innerHTML= conector.responseText;
            }
         else if( conector.status==404 )
            {
            capa.innerHTML= "La pagina que intentas cargar no existe...";
            }
         else
            {
            capa.innerHTML= conector.status;
            }
         }
      }
   conector.send(null);
   }



AJAX.PHP

Código :

<?php
/*
######################################
##      Funciones para Mensajeria      ##
######################################*/
if( !strcmp( $_GET["id"], "mensajeria") )
   {
   /*   ####################################
   ##      Funciones para Bandeja Msg.    ##
   ######################################*/

   if( !strcmp( $_GET["mov"], "redactar" ) )
      {
      echo "Enviaste formulario...<br>";
      echo "Usuario: ". $_POST["mensajeria_usuario"]. "/". $_GET["mensajeria_usuario"]. "<br>";
      if( isset($_POST["mensajeria_usuario"]) )   echo "Si se creo...";
      else echo "No se creo...";
      }
   }
?>

Por Diabliyo

9 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 11 Ago 2008 09:28 pm
Mucho código para revisarlo todo de un tirón (gratis)

Así de un vistazo, veo que mandas (pretendes mandar) el form mediante una función:
cargar_datos( vars ...
[...]
conector.open( flujoddatos, url+'?'+vars, true );
[...]
Pero...
¿Está en "vars" todas las variables que pretendes eviar?
Porque yo no las veo todas. De hecho, sólo veo:
id=$_GET["id"]."&mov=".$_GET["mov"]
Pero nada de las demás:
mensajeria_usuario
mensajeria_asunto
mensajeria_msg

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox
Citar            
MensajeEscrito el 12 Ago 2008 06:05 am
harggggg
si vas a postear todo tu codigo mejor pon el link para darse una idea, es mas practico, por otro lado si posteas codigo que sea solo la parte que esta con problemas
por otro lado tienes un serio problema en el estilo de tu programación, lo que haces es poco eficiente y dificil de leer

  1. no uses tantos echos, para eso existe php embebido
  2. separa el codigo de la interfaz para eso estan los templates.
  3. aprende a usar frameworks lo nesecitas, tu estilo es muy feo, te recomiendo Jquery para javascript (ajax incluido) y codeignaiter para php.

esto no resuelve tu pregunta pero te hara mejor persona

Por Inyaka

Claber

3176 de clabLevel

9 tutoriales
2 articulos

Genero:Masculino   Desarrollador de GAIA

Programador y fotógrafo

firefox
Citar            
MensajeEscrito el 12 Ago 2008 03:01 pm

rizome escribió:

Mucho código para revisarlo todo de un tirón (gratis)

Así de un vistazo, veo que mandas (pretendes mandar) el form mediante una función:
cargar_datos( vars ...
[...]
conector.open( flujoddatos, url+'?'+vars, true );
[...]
Pero...
¿Está en "vars" todas las variables que pretendes eviar?
Porque yo no las veo todas. De hecho, sólo veo:
id=$_GET["id"]."&mov=".$_GET["mov"]
Pero nada de las demás:
mensajeria_usuario
mensajeria_asunto
mensajeria_msg


Bueno, pues tengo poco usando AJAX pero ahora entiendo un poco mas... Como veo pues debo enviar de alguna forma mis variables a la funcion cargar_datos() especificandolas y tratandolas como POST debido a que son de un formulario (vaya tambien se puede como GET pero los de formularios prefiero tratarlas como POST).

Asi que viendo un ejemplo de este mismo sitio me encontre que para enviar las variables POST mediante un ajax es necesario invocar el flujo de datos POST dentro de conector.open(); y enviando las variables POST por la funcion conector.send();.

A partir de aqui ya pude recivir una variables por POST, pero mi problema es como envio muchas variables ???. Lo primero que se me ocurrio es aumentar el numero de argumentos de mi funcion cargar_datos() para hacerla un poco mas universal y usarla siempre que desee hacer algo con AJAX.

De modo que agrege un argumento mas en donde incluyo solo y unicamente los nombres de las variables POST a utilizar delimitadas por el caracter : y una ves dentro de la funcion cargar_datos() examino si el nuevo argumento es distinto de 0, si esto se cumple entonces quiere decir que estamos enviando variables extras que serana sacados por conector.send();, pero primero abra que armar la trama :S.

Vaya, si recivimos esto como argumento:

nombre:direccion:telefono

Entonces se trata de un formulario donde se desean tratar 3 variable (nombre, direccion y telefono). Apartir de aqui hacer un corte (split()), y hacer una trama asi, y enviarla por conector.send();:

nombre=valordelinput&direccion=valordelinput&telefono=valordelinput

Mi funcion anterior de ajax era:

Código :

function cargar_datos( vars, capaview, flujoddatos )
   {
   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 )
            {
            capa.innerHTML= conector.responseText;
            }
         else if( conector.status==404 )
            {
            capa.innerHTML= "La pagina que intentas cargar no existe...";
            }
         else
            {
            capa.innerHTML= conector.status;
            }
         }
      }
   conector.send(null);
   }


Y la modificada con un argumento de mas para determinar si esta funcion es invocada para tratar variables por el flujo POST de un formulario, es:

Código :

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=false, i=0;
      
      for( i=0; i<(myarr.length); i++ )
         {
         if( i>0 )
            trama+"&";
         trama+myarr[i]+"="+document.getElementById(myarr[i]).value;
         }

      conector.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" );
      conector.send(trama);
      }
   else
      conector.send(null);
   }


Como vemos en esta nueva funcion, realizo split() al nuevo argumento y meto todo en un arreglo, apartir de aqui recorro el arreglo para ir formando la trama, el problema es que no logro concatenar bien la trama, desconocsco el porque :S.... Pero he realizado alert() a los valores que voy concatenando para verificar que no este concatenando valores incoherentes o que no deseo, pero en base a los alert() recividos, he comprobado que los valores que estoy concatenando si son los corrector, el problema es que no se porque no funciona :S !!...

Por favor, echenme una manita !!...

bye bye

Por Diabliyo

9 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 12 Ago 2008 05:45 pm
Arreglado ;) !!


El problema era que estaba haciendo mal la concatenacion en javascript, vaya, lo correcto era hacerla asi:

Código :

var trama=""; //se debe especificar vacio por defecto

trama += "valor";  //asi concatenamos bien


Bueno, todo este show fue porque vi en un tutorial que para concatenar en javascrip era solamente asi:

Código :

var trama;  //sin inicializarlo
trama+"valor";  //error, aqui no se concatena nada :S


En fin, finalmente la funcion que asi (ver code abajo), pero importante recordarles que esta funcion puede ser usada para invocar un valor o bien muchos valores N con la finalidad de procesar formulario que bienen desde PHP y que seran pasados con AJAX hacia otro archivo PHP, ya sea utilizando el flujo GET o POST !!...

Código :

<?php
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);
   }?>

Por Diabliyo

9 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 12 Ago 2008 05:46 pm
jejeje.. el de arriba no es un PHP, es un codigo JAVASCRIPT :D

Por Diabliyo

9 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 12 Ago 2008 05:47 pm
OJO: deberian permitir EDITAR los post's, ya que sino tendremos que hacer mas ponderando el hilo :S, debido a los errores :D !!

Por Diabliyo

9 de clabLevel



Genero:Masculino  

firefox
Citar            
MensajeEscrito el 12 Ago 2008 07:56 pm
Vaya... no me enteré de nada.
Si todo quedó arreglado, estupendo.

Si no... aprende a resumir, por favor, y pon cómo quedan las cosas.

Por El Oso Amoroso

Claber

1780 de clabLevel

6 tutoriales

 

Madrid, España, Europa, Eurasia, La Tierra, Sist.Solar, Vía Láctea, UNIVERSO

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.