En este art\u00edculo vamos a explicar con detalle dos detalles que podr\u00edan incluirse en la mayor\u00eda de nuestras p\u00e1ginas Web.<\/p>\n
Por un lado tendremos un formulario oculto que mostraremos mediante un link utilizando jQuery con los m\u00e9todos hide() y show() y, por otro, el procesado de la informaci\u00f3n con jQuery y Ajax + PHP.<\/p>\n
Como siempre que vamos a trabajar con jQuery, necesitaremos incluir en el <head> de nuestra p\u00e1gina la librer\u00eda adem\u00e1s de los scripts necesarios.<\/p>\n
<script type=\"text\/javascript\">\r\n$(document).ready(function(){\r\n\u00a0 $(\"#hide\").click(function(){\r\n\u00a0\u00a0\u00a0 $(\"#element\").hide();\r\n\u00a0 });\r\n\u00a0 $(\"#show\").click(function(){\r\n\u00a0\u00a0\u00a0 $(\"#element\").show();\r\n\u00a0 });\r\n});\r\n<\/script><\/pre>\nEl c\u00f3digo anterior es el que se encarga de mostrar y ocultar el formulario utilizando las funciones hide() para ocultar y show() para mostrar el contenido de un contenedor con id=\u00bbelement\u00bb que de entrada estar\u00e1 oculto.<\/p>\n
Y para procesar el formulario:<\/p>\n
<script type=\"text\/javascript\">\r\n\r\n$(document).ready(function() {\r\n\r\n\u00a0\u00a0\u00a0 $(\"#enviar-btn\").click(function() {\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var name = $(\"input#name\").val();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var message = $(\"textarea#message\").val();\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 var dataString = 'name=' + name + '&message=' + message;\r\n\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $.ajax({\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 type: \"POST\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 url: \"addmessage.php\",\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 data: dataString,\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 success: function() {\r\n\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0\u00a0\u00a0 \u00a0$(\"#element\").hide();\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 $('#newmessage').append('<h2>Tu informaci\u00f3n ha sido recibida correctamente!<\/h2><table><tr><td>Nombre:<\/td><td>'+name+'<\/td><\/tr><tr><td>Mensaje:<\/td><td>'+message+'<\/td><\/tr><\/table>');\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 });\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 return false;\r\n\u00a0\u00a0\u00a0 });\r\n});\r\n<\/script><\/pre>\nLa explicaci\u00f3n del c\u00f3digo anterior es simple, tras pulsar el bot\u00f3n con id=\u00bbenviar-btn\u00bb, recogemos los datos del formulario para procesarlos en el archivo \u00abaddmessage.php\u00bb que recoger\u00e1 los datos mediante el m\u00e9todo POST para enviarlos por correo o guardarlos en una base de datos o para lo que te interese.<\/p>\n
Al finalizar el proceso, informamos mediante el success de jQuery que la informaci\u00f3n se ha recibido correctamente y mostramos los datos recibidos.<\/p>\n
En nuestro <body> tendremos algo como lo siguiente:<\/p>\n
<a href=\"#\" id=\"show\">Mostrar<\/a>\r\n<div id=\"element\" style=\"display: none;\">\r\n\u00a0\u00a0 <div id=\"close\"><a href=\"#\" id=\"hide\">cerrar<\/a><\/div>\r\n\u00a0\u00a0 <form method=\"post\" action=\"\">\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Nombre:<br\/>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <input type=\"text\" id=\"name\" name=\"name\" size=\"40\" \/><br\/><br\/>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 Mensaje:<br\/>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <textarea name=\"message\" id=\"message\" rows=\"6\" cols=\"40\"><\/textarea>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <br\/><br\/>\r\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <div style=\"margin-left: 376px;\"><input name=\"submit\" type=\"submit\" value=\"enviar\" id=\"enviar-btn\" \/><\/div>\r\n\u00a0\u00a0\u00a0 <\/form>\r\n<\/div><\/pre>\nTenemos el link que abrir\u00e1 el formulario y dentro del formulario tendremos otro link que lo cerrar\u00e1 y un bot\u00f3n para enviar la informaci\u00f3n.<\/p>\n
Gracias a la tecnolog\u00eda Ajax la informaci\u00f3n se puede enviar y procesar sin necesidad de recargar toda la p\u00e1gina. En el ejemplo en funcionamiento no se nota mucho el efecto pero si estuvieramos en una p\u00e1gina con mucho contenido, podr\u00eda ser un kaos si esta informaci\u00f3n tiene que ser enviada al servidor para ser procesada.<\/p>\n