Tag Archive for: formulario

02Feb 2009 16 Comments

Envia correos sin recargar jquery ajax

Categories: AJAX, PHP - Tags: , ,

En 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>';
}
?>






20Jan 2009 2 Comments

Ajax enviar formularios sin recargar jquery

Categories: AJAX, PHP - Tags: , ,

En un post anterior expliqué como actualizar un elemento de la página sin recargar pero ahora voy a explicar como enviar un formulario para que este nos muestre la respuesta de PHP sin necesidad de recargar la página o redirigir a otra página.

Creando el formulario

Como verás a continuación el formulario no tiene nada de especial, es igual que cualquier otro, además he creado un div con el id “result” que es donde mostraremos el resultado de lo que enviemos.

1
2
3
4
5
6
7
8
9
10
11
12
13
<form method="post" action="envio.php" id="fo3" name="fo3" >
      <fieldset>
        <legend>Perfil</legend>
        <ol>
            <li><label>Nombres:</label><input type="text" size="30" name="fnombres" /></li>
            <li><label>Apellidos:</label><input type="text" size="30" name="fapellidos" /></li>
            <li><label>Correo:</label><input type="text" size="30" name="fcorreo" /></li>
        </ol>
        <input type="submit"   name="mysubmit" value="Enviar" />
      </fieldset>
</div>
</form>
<div id="result"></div>

Implementando AJAX

Ahora viene la parte novedosa del script voy a hacer que jquery intercepte el evento submit y envie el formulario sin recargar la página.

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
<script language="javascript" src="jquery-1.3.min.js"></script>
<script language="javascript">
$(document).ready(function() {
   // Esta primera parte crea un loader no es necesaria
    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');
    });
   // Interceptamos el evento submit
    $('#form, #fat, #fo3').submit(function() {
  // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                $('#result').html(data);
            }
        })        
        return false;
    });
})  
</script>


Suscribete

Ahora también puedes suscribirte via correo electrónico

Ingresa tu dirección de correo:

Delivered by FeedBurner


Facebook

Mi Galeria flickr

[ Ver más ]

© Copyright - Miguel Manchego - Design by Kriesi