jueves, 16 de octubre de 2008

Cómo enviar todos los datos de un Formulario con AJAX


En las pasadas entradas (véase AJAX), comentábamos cómo cargar datos de manera asíncrona con AJAX.

Pero no hemos trabajado en el envío de datos con formularios, que es en si, algo muy básico. Generaremos un script genérico para no cambiarlo cada vez que necesitemos usarlo para otro formulario, además haremos que los datos que se envían en otra página, se reciban en una sección especifica.

1. Crearemos nuestro formulario, por ejemplo agregar una noticia:



Una breve explicación:
  1. El formulario debe tener name y id, con el mismo nombre, a su vez cada campo.
  2. Se añade el evento ONCLICK en el boton, el cual EnviarForm (el nombre de la función creada en AJAX) envía 4 parametros: noticiasa.php (en donde se enviarán los datos, y en dicha página se recibirán con POST o REQUEST). c=3 (es la sección de la página a donde se enviarán los datos, para una explicación más profunda en Enviar valores con AJAX). noticias (id, nombre del formulario). contenido (nombre del DIV, ver en Cargar páginas con AJAX).

2. Creación del Script de AJAX

Recuerden que para que funcione nuestro script, debemos crear primero el Objeto de AJAX, de esta manera:

function ajaxFunction() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); return xmlHttp; } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); return xmlHttp; } catch (e) { try { xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); return xmlHttp; } catch (e) { alert("Tu navegador no soporta AJAX!"); return false; }}}}

Ya creado, podremos añadir nuestra función para el envío de todos los campos del formulario:

function EnviarForm(_pagina,seccion,formid,capa) {
var ajax;
var
Formulario = document.getElementById(formid);
var longitudFormulario =
Formulario.elements.length;
var cadenaFormulario = "";
var
sepCampos;
sepCampos = "";
for (var i=0; i <= Formulario.elements.length-1;i++) { cadenaFormulario += sepCampos+Formulario.elements[i].name+'='+encodeURI(Formulario.elements[i].value); sepCampos="&"; } ajax = ajaxFunction(); ajax.open("POST", _pagina, true); ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); ajax.onreadystatechange = function() { if (ajax.readyState==1){ document.getElementById(capa).innerHTML =
}
if (ajax.readyState == 4) {
document.getElementById(capa).innerHTML = ajax.responseText;
}
}

ajax.send(cadenaFormulario+"&"+seccion);
}


Una breve explicación:
  1. EnviarForm(_pagina,seccion,formid,capa): Se reciben los valores que enviamos con el formulario.
  2. Enviamos todos los campos en cadenaFormulario, además concatenamos en que sección de la página los recibiremos (seccion).

3. Recibiendo los valores de los campos

En nuestra página (noticiasa.php), agregaremos lo siguiente:

if($_REQUEST["c"]==3){
if(!empty($_REQUEST["titulo"]) or
!empty($_REQUEST["tags"]) )
{
echo $_REQUEST["titulo"]; //Titulo de la Noticia
}

Una breve explicación:
  1. Con el IF, pregunto si el valor de la variable C, es de 3, que es el caso.
  2. Después veo si las variables no están vacías con la función EMPTY.
  3. Por ultimo, imprimo el titulo de la noticia.

16 comentarios:

Leticia Carolina dijo...

Buenas.
Tengo una duda.. a que te refieres con "sección de la Pagina"?
En mi caso lo que tengo es una página con un menú y un div y lo que quiero es cargar otra pagina (.php) dentro del div cuando selecciono una de la opciones del menu.
Perdon por preguntar, tal vez cosas básicas, es la primera vez que voy a usar Ajax..

Saludos

Héctor Guedea dijo...

Hola Leticia!,

A lo que te refieres es por Enlaces NO por formulario, y eso lo publique tal cual me estas diciendo en http://guedea.blogspot.com/2008/09/cargar-pginas-con-php-y-ajax.html .

El cual es eso, tener una página HTML, donde cada enlace carga una página en un DIV con AJAX. Hasta hice el diseño de una web y como quedaria.
Pero ya vi, en que tienes problemas. Lo que falto explicar en esa entrada, es que en su página de Inicio tienen que agregar el DIV, en ese caso lo llamamos CONTENIDO, entonces en donde estan nuestros enlaces, dentro de la ETIQUETA BODY, debe el div con id=contenido, de hecho gracias a tu observación, he ACTUALIZADO esa entrada, agregandole más detalles, revisala, y me dices si tienes dudas.
Cuando soluciones eso, hay otra entrada en este blog, para incorporar un "CARGANDO" LOADING, cuando haces una llamada asíncrona a una página...
SALUDOS y estamos en contacto!

Ariel dijo...

Hola:

Yo necesito enviar datos de un form por emial, este ejemplo serviria para realizar esta tarea? Si no, que debería modificar para lograrlo?
Desde ya gracias.

ARIEL.

Héctor Guedea dijo...

Hola Ariel,
Claro que puedes, SIN CAMBIAR NADA. como estas enviando todos los campos del formulario,en tu caso por ejemplo,
si tienes los campos: nombre, asunto, correo, dirigido (con un SELECT), comentario (recordar, poner a cada campo los id`s con el mismo nombre). Los recibirias:

$_POST["nombre"]
$_POST["asunto"]
$_POST["correo"]
$_POST["dirigido"]
$_POST["comentario"]

Yo utilizo el PHPMailer, para mandar mis correos de forma segura, descarga la librería en: http://phpmailer.codeworxtech.com/

y para que veas como se utiliza, aqui el ejemplo:
http://phpmailer.codeworxtech.com/index.php?pg=examples
(OJO toma el último ejemplo, del archivo mail_test.php, los demás son mas avanzados, vas empezando, poco a poco)

en el ejemplo, sale algo asi:

$mail->From= "list@mydomain.com";

bueno, pues como quieres saber el correo de la persona que te lo manda, recibiendo lo con el POST, se cambiaria asi:

$mail->From = $_POST["correo"];

y listo, así para los demás caso..

Saludos

Alfa 2 dijo...

gracias, voy a probar entonces

Anónimo dijo...

que contiene el archivo noticiosa.php ????

Ivan dijo...

Hola, como ya he dicho en otros post tuyos, Magnifico!, me ha surgido un problema, he probado varias cosas y no lo he podido solucionar, bien, es si uno de los campos del formulario es un input file donde recibo el formulario no recibe los valores ni con $_files ni con $_request ni con $_post para poder ejecutarse la orden de subir el archivo a la carpeta de destino que le indico, ¿alguna idea? gracias anticipadas, un saludo.

Héctor Guedea dijo...

Ivan,
¿ya agregaste en la etiqueta del form lo siguiente?

enctype="multipart/form-data"

recuerda que si el enctype del form no tiene el multipart/form-data no enviará la imagen.

Sino, échale un ojo al siguiente post: http://cabezaderaton.com.ar/ajax-file-upload

Ivan dijo...

Si si, en form tengo puesto eso, por que si lo pruebo sin ajax enviando a destino.php si funciona ok, pero con ajax que lo uso para recargar contenido en un DIV no recibe $_FILES, pero si el resto de campos de los formularios. En cuanto pueda miro el enlace que me has dejado y cuento el resultado, gracias.

Ivan dijo...
Este comentario ha sido eliminado por el autor.
Ivan dijo...

Por si le sirve de ayuda a alguien, he creado dos formularios:
Uno que sube la imagen a traves de un iframe oculto con un evento onchange en el boton Examinar del campo Intup type="file".

Otro que envia el resto del formulario como se explica en este post.

Héctor Guedea dijo...

Así es Ivan, bien hecho...

Gracias por compartir con todos nosotros.

Tron dijo...

Me estoy volviendo loco para hacer funcionar el código. Faltan etiquetas, falta un cierre de llave ("}") en noticiasa.php... vaya lío. Tendré que buscar en otra página.

¿No podrías colgar al final de tu artículo un archivo tipo ZIP con los archivos ya escritos y funcionando correctamente?

Socrates dijo...

Me rindo, no hay manera que funcione.

slein dijo...

como envio la url del formulario porq ese ejemplo q pusieron funciona pero cuando el archivo esta local pero cuando esta en muchs carpetas no me manda el formulario lo q ac es q atualiza la pagina

Anónimo dijo...

Hola. Gracias por el conocimiento compartido.
Este ejemplo lo podria usa cuando necesito enviar los datos de una tabla html. Es decir una tabla que se llena con un select como podria enviarla con ajax.
Te agradezco si me puede colaborar