Envia correos sin recargar jquery ajax
Categories: AJAX, PHP - Tags: AJAX, formulario, jqueryEn un post anterior expliqué como enviar formularios sin recargar, ahora voy a explicar como hacer un formulario de envio de correos con jquery, incluyendo un loader y que nos muestre un mensaje de error si no se pudo enviar el mensaje.
El formulario mailer
El formulario practicamente no tiene nada de especial, sólo debemos asegurarnos que tenga como id “myform”, además necesitamos dos divs en uno mostraremos el resultado y el otro nos servirá como loader.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <form method="post" action="envio.php" id="myform" name="myform" > <fieldset id="form"> <legend>Send Email</legend> <ol> <li><label>Name:</label><input type="text" size="30" name="fname" /></li> <li><label>E-mail:</label><input type="text" size="30" name="femail" /></li> <li><label>Phone:</label><input type="text" size="30" name="fphone" /></li> <li><label>Comments:</label><textarea name="fcomment" rows="5" cols="25"></textarea></li> </ol> <p align="center"> <input type="submit" name="mysubmit" value="Enviar" /> </p> </fieldset> </div> </form> <div id="loading"></div> <div id="result"></div> |
Ajax para el envio del formulario
En este caso vamos a usar jquery para que envie los datos del formulario a envio.php, el cual a su vez enviará un correo electrónico
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script language="javascript" src="jquery-1.3.min.js"></script> <script language="javascript"> $(document).ready(function() { // Mostramos el loader $().ajaxStart(function() { $('#loading').show(); $('#result').hide(); }).ajaxStop(function() { $('#loading').hide(); $('#result').fadeIn('slow'); }); // Enviamos el formulario $('#myform').submit(function() { // Definimos el metodo ajax, los datos $.ajax({ type: 'POST', url: $(this).attr('action'), data: $(this).serialize(), success: function(data) { // Imprimimos la respuesta en el div result $('#result').html(data); } }) return false; }); }) </script> |
envio.php
Ahora vamos a hacer el envio de un correo electrónico con los datos del formulario
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <? // definimos el mensaje $mensaje=""; $mensaje.="Contact from:". "\n\n"; $mensaje.="Name: ".$_POST['fname']."\n"; $mensaje.="E-mail: ".$_POST['femail']."\n"; $mensaje.="Phone: ".$_POST['fphone']."\n"; $mensaje.="Comments: ".$_POST['fcomment']."\n"; // definimos a quien se lo enviamos $email_destiny="mio@mail.com"; $subject="Message from us"; // verificamos si se envió if (mail($email_destiny,$subject,$mensaje,"From: Contact<".$_POST['femail'].">")) { echo '<p align="center"><b>Thanks for your comments</b></p>'; } else { echo '<p align="center">Error '.$_POST['fname'].'</p>'; } ?> |
Hola soy nuevo en esto…. me baje el ejemplo y probe cambiarle la direccion de email y me largo un error. Sabes el porque de este comportamiento??? Muchas Gracias.
Si me indicas que error aparece podria decirte cual puede ser la causa. Normalmente no debería fallar a menos que tu servidor no soporte SMTP para el envio de correos
Amigo, muchisimas gracias! Con este ejemplo pude hacer exactamente lo que queria en mi página. En vez de utilizar \"Envio.php\", usé un servlet y también funcionó bien.
Que tal, probe el archivo tal cual tienes en el zip y no me funciona… hice algunas modificaciones y lo manda pero no manda datos. Si quito las funciones de ajax funciona bien pero se recarga la pagina.
Alguna idea? :/
Este script no puede ser usado en localhost ya que normalmente no tenemos instalado un servidor SMTP en nuestras computadoras, esa podria ser una causa. Otra posible causa es cambia la primera linea de envio.php
Yo de nuevo, lo estoy probando directamente del servidor… pero sigue sin caminar :/ me hace el fade in del recuadro donde aparece el mensaje pero no manda nada ni despliega el mensaje.
Para saber cual es exactamente tu error, es necesario usar Firebug, y ver la respuesta AJAX y asi salir de dudas, este tutorial te explica como usarlo
Hola amigo, te felicito!
Me cansé de buscar una forma facil de usar ajax con jquery en un formulario… y sólo aparecían puros ejemplos viejos antes que apareciera “jquery”, ejemplos viejos o con plugins de que uno nunca va a usar.
Te felicito por el tuto.. Saludos!
Hola ¡¡
He implementado tu codigo en una nueva versión de la web que estoy preparando y funciona a la perfección, gracias ¡¡
La unica pega es que no me muestra la imagen de \\
Hola
Como verás en la web que te indico ya lo tengo implementado, MUCHAS GRACIAS!. La unico que no consigo es quitar el recuadro/marco/linea que envuelve al formulario, entiendo que es algo de las hojas de estilo, pero por más vueltas que le doy no lo consigo, please help
HOla, aun no pruebo el ejemplo, pero se ve genial, justo lo que buscaba.
Para responder a Luis respecto a las lineas que rodean el form. si no me equivoco eso lo hace la etiqueta para que le pegues una mirada a eso
Hola, sabes.. no me funciona el codigo, al apretar enviar.. no me recarga en la misma pagina, sino que me envia a la pagina php del envio de mail.
el action del formulario no me funciona si solo escribo “envio.php”, tengo que escribir la ruta completa “http:// …. /envio.php” .. sera por eso que no funciona??? no entiendo, es como si no estuviera reconociendo la libreria js =/