Empezamos el tutorial para conseguir la creación y envío de formularios a través de Ajax, para ello cuando creamos páginas en HTML es muy fácil realizar formularios de entrada de datos, ya sea para que nos sirva de formulario de contacto con la propia página u organización, para realizar alguna encuesta, como registro, etc. Lo normal es que si queremos hacer dicho formulario para algo sencillo nos valgamos del método Post de PHP para enviar la información y poder visualizarla, tratarla o modificarla.
Sin embargo, el uso de dicho método en PHP tiene un gran inconveniente, que al introducir datos tenemos la necesidad de actualizar o recargar la página en cuestión. Por eso mismo vamos a ver un método en el que no haya necesidad de ello.
Me refiero a un formulario creado con Ajax, de igual modo ayudado con PHP y creado para una pagina en HTML. Obviamente tenemos que crear nuestra página en HTML, nuestro index, al que podemos customizar o personalizar con estilos gracias a un archivo de CSS.
Después de crear esa base necesitaremos crear otros 2 archivos, un archivo de php donde realizaremos la edición de la entrada de datos por el formulario y un script implementado en javascript, es decir un archivo .js. Es en este script en el que nos valdremos de Ajax para poder procesar los datos de tal manera que no tengamos necesidad de recargar nuestra página web como ocurriría si solo utilizaramos un método de php como Post o get.
Además de esto tendremos que incluir una biblioteca de jQuery para poder interpretar lo que escribamos con Ajax.
Para empezar es importante recordar que todos los archivos que creemos, nuestro archivo javascript de Ajax al que llamaremos funcionamiento.js, el archivo de hoja de estilos de css que llamaremos estilos.css, si es que vamos a crear uno, y la librería de jQuery debemos incluirlo al inicio de nuestro código de HTML.
Es tan sencillo como incluirlos en el head de nuestro index.html:
<!DOCTYPE html> <html lang = es> <head> <meta charset = utf-8/> <!-Aquí importamos los archivos: hoja de estilos, biblioteca jquery y nuestro script-> <link rel="stylesheet" type="text/css" href="estilos.css"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="funcionamiento.js"></script> </head> <body> <!-Aquí debemos crear la estructura donde vaya el formulario-> ... </body>Ahora vamos a crear un archivo con código de php sencillo que llamaremos envio.php donde recogeremos la información que se envíe a través de nuestra página web. En este caso la información va a ser para un formulario de contacto asique los datos los vamos a enviar a una dirección de correo electrónico propia para poder leer los mensajes que dejen los usuarios, aunque esto podría modificarse y enviarlo a otra página u otro lugar.
<?php
$nombre = $_POST[‘nombre’];
$email = $_POST[’email’];
$mensaje = $_POST[‘mensaje’];
$destino = ‘email@email.com';
$de = ‘From: ‘ . $email;
$mensajeCorreo = “Nombre: $nombre\n E-Mail: $email\n Mensaje:\n $mensaje”;
if ($_POST[‘submit’])
{
if (mail($destino, $titulo, $mensajeCorreo, $de))
{
echo “<script language=’javascript’>
alert(‘Mensaje enviado, muchas gracias.’);
window.location.href = ‘http://TUWEB.COM';
</script>”;
} else
{
echo ‘Falló el envio';
}
}
?>
Después de crear el código php vamos a lo realmente interesante que es la creación de nuestro archivo funcionamiento.js donde utlilizaremos Ajax. De esta manera procesaremos los datos para nuestro formulario de contacto sin actualizar la página como había dicho anteriormente. Primero mostraremos el código que tenemos que escribir en nuestro script:
function envioMail()
{
$("#car_enviar").attr("disabled", true);
$(".car_error").remove();
var filtro=/^[A-Za-z][A-Za-z0-9_]*@[A-Za-z0-9_]+.[A-Za-z0-9_.]+[A-za-z]$/;
var s_email = $(‘#c_mail’).val();
var s_nombre = $(‘#c_name’).val();
var s_msj = $(‘#c_msg’).val();
if (filtro.test(s_email))
{
sendMail = "true";
}
else
{
$(‘#c_mail’).after("<span class=’car_error’ id=’car_error_mail’>Ingrese e-mail valido.</span>");
sendMail = "false";
}
if (s_nombre.length == 0 )
{
$(‘#c_name’).after( "<span class=’car_error’ id=’car_error_name’>Ingrese su nombre.</span>" );
var sendMail = "false";
}
if (s_msj.length == 0 )
{
$(‘#c_msg’).after( "<span class=’car_error’ id=’car_error_msg’>Ingrese mensaje.</span>" );
var sendMail = "false";
}
if(sendMail == "true")
{
var datos = {
"nombre" : $(‘#c_name’).val(),
"email" : $(‘#c_mail’).val(),
"mensaje" : $(‘#c_msg’).val()
};
$.ajax({
data: datos,
url: ‘envio.php’,
type: ‘post’,
beforeSend: function () {
$("#car_enviar").val("Enviando…");
},
success: function (response) {
$(‘form’)[0].reset();
$("#car_enviar").val("Enviar");
$("#c_information p").html(response);
$("#c_information").fadeIn(‘slow’);
$("#car_enviar").removeAttr("disabled");
}
});
}
else
{
$("#car_enviar").removeAttr("disabled");
}
}
Creamos la variable filtro para comprobar que el email que insertemos es válido, para ello ponemos que la dirección introducida sea alguna sucesión de caracteres seguidas de un símbolo de arroba, otra sucesión de caracteres, un punto y más caracteres. Si no tiene esa estructura cuando enviemos el mensaje nos dirá que no se puede enviar ya que el email introducido no es válido. Si cumple con los requisitos almacena en la variable enviar email sendMail el valor true y continúa comprobando.
Después valida la longitud del nombre. Si es igual a 0 significa que no hemos introducido nombre y nos pide que volvamos a introducirlo.
Hace lo mismo con el mensaje y su longitud para comprobar que no hemos dejado el campo en blanco.
Tras haber comprobado todos los campos y ver que están correctos guarda en la variable datos que es un array, el nombre, el email y el mensaje a enviar.
Por último ya con Ajax, pasamos los datos y hacemos referencia al archivo envio.php mediante el método post y enviamos la información. Antes de que se llegue a enviar aparece el mensaje “enviando” hasta que termina el proceso con éxito.
