Ensayos

Ajax enviar formularios sin recargar jquery
Categories: AJAX, PHP - Tags: AJAX, formulario, jquery
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 elformulario 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.


Perfil

Nombres:
Apellidos:
Correo:







Implementando ajax
Ahora viene la parte novedosa del script voy a hacer que jquery intercepte el evento submit y envie el formulario sinrecargar la página


$(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 formulariousando 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;
});
})



2…………………………………………………
Envía correos sin recargar jquery ajax
Categories: AJAX, PHP - Tags: AJAX, formulario, jquery
En unpost 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 unomostraremos 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

Send Email

Name:
E-mail:
Phone:
Comments:










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
1314
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

$(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;
});
})

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
3………………………………..
Validar formulariosAjax jquery
Categories: AJAX - Tags: AJAX, formulario, jquery
Siempre que hacemos un formulario, necesitamos un script de validación, el problema es siempre tener un script que sea facil de usar, lo suficientemente flexible para que funcione en cualquier formulario y que sea personalizable, encontré justamente eso.
HTML de formulario para validar
Solo debemos fijarnos bien en el id delformulario y para los campos que deseamos validar agregar una clase required, email, etc
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21


Nombre: (requerido al menos dos caracteres)



E-mail: (requerido)



Tu página web: (opcional)



Comentarios: (requerido)






Agregar el validador
Primero debemos incluir la libreria jquery, el validador y con...