Para seguir el mismo ejemplo que en el otro post vamos a utilizar el mismo formulario:

<form id="myForm" action="contacto.php" method="post" style="height:200px;"> 
    <label>Nombre:</label> <input type="text" name="name" /> 
    <label>Mensaje:</label> <textarea name="mensaje"></textarea> 
    <input type="submit" value="Enviar" /> <div id="ajax_loader"><img id="loader_gif" src="loader.gif" style=" display:none;"/></div>
</form>

Pero ahora para enviar el formulario tan solo haremos uso de algunas funciones de jQuery como son :

• .serialize() : encargada de codificar todos los valores del formulario en una cadena para ser pasada.
• .submit(): encargada de añadir al evento submit del formulario la función que usaremos para enviar el mismo.
• jQuery.ajax(): encargada de realizar AJAX request.

Nuestro nuevo script quedaría de la siguiente manera:

        $(document).ready(function() { 
 
          $('#myForm').submit(function(){ //en el evento submit del fomulario
	          event.preventDefault();  //detenemos el comportamiento por default
 
			  var url = $(this).attr('action');  //la url del action del formulario
			  var datos = $(this).serialize(); // los datos del formulario
			  $.ajax({
				  type: 'POST',
				  url: url,
				  data: datos,
				  beforeSend: mostrarLoader, //funciones que definimos más abajo
				  success: mostrarRespuesta  //funciones que definimos más abajo
			   });
 
          });	
 
 
 
 
        });
 
 
        function mostrarLoader(){
              $('#loader_gif').fadeIn("slow"); //muestro el loader de ajax
        };
        function mostrarRespuesta (responseText){
	          alert("Mensaje enviado: "+responseText);  //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo "Hola" , la variable responseText = "Hola" . Aca hago un alert con el valor de response text
	          $("#loader_gif").fadeOut("slow"); // Hago desaparecer el loader de ajax
	          $("#ajax_loader").append("<br>Mensaje: "+responseText); // Aca utilizo la función append de JQuery para añadir el responseText  dentro del div "ajax_loader"
        };

Para empezar necesitamos un formulario. Vamos a usar de ejemplo un formulario de contácto sencillo:

1
2
3
4
5

<form id="myForm" action="contacto.php" method="post" style="height:200px;"> 
    <label>Nombre:</label> <input type="text" name="name" /> 
    <label>Mensaje:</label> <textarea name="mensaje"></textarea> 
    <input type="submit" value="Enviar" /> <div id="ajax_loader"><img id="loader_gif" src="loader.gif" style=" display:none;"/></div>
</form>

Una vez tengamos el codigo HTML del formulario tan solo debemos añadir el plugin y ejecutarlo una vez el DOM este cargado añadiendo las opciones que creamos convenientes.
Hay diferentes gif animados para ajax, si quieren alguno diferente echen un vistazo al último artículo que escribí.
Para consultar las diferente opciones de jquery.form visiten su web.

index.php:

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

<script src="js/jquery-latest.js" type="text/javascript"></script>
 <script src="js/jquery.form.js" type="text/javascript"></script> 
 
<script type="text/javascript">
 
        // esperamos que el DOM cargue
        $(document).ready(function() { 
            // definimos las opciones del plugin AJAX FORM
            var opciones= {
                               beforeSubmit: mostrarLoader, //funcion que se ejecuta antes de enviar el form
                               success: mostrarRespuesta //funcion que se ejecuta una vez enviado el formulario
            };
             //asignamos el plugin ajaxForm al formulario myForm y le pasamos las opciones
            $('#myForm').ajaxForm(opciones) ; 
 
             //lugar donde defino las funciones que utilizo dentro de "opciones"
             function mostrarLoader(){
                          $(#loader_gif).fadeIn("slow"); //muestro el loader de ajax
             };
             function mostrarRespuesta (responseText){
                           alert("Mensaje enviado: "+responseText);  //responseText es lo que devuelve la página contacto.php. Si en contacto.php hacemos echo "Hola" , la variable responseText = "Hola" . Aca hago un alert con el valor de response text
                          $("#loader_gif").fadeOut("slow"); // Hago desaparecer el loader de ajax
                          $("#ajax_loader").append("<br>Mensaje: "+responseText); // Aca utilizo la función append de JQuery para añadir el responseText  dentro del div "ajax_loader"
             };
 
        }); 
 
</script>

Este ejemplo es muy simple. El action del formulario apunta a contacto.php y es ahi donde hay que poner las funciones que queramos, como por ejemplo que nos envie un mail con el mensaje y nombre que aparece en el formulario. Si no estuvieramos usando JQuery y el plugin de jquery.form, al hacer click en “Enviar” nuestro navegador cargaria la página contacto.php como suele pasar normalmente. En este caso gracias al AJAX el contenido del formulario se enviara mediante la variable $_POST a la página contacto.php de una forma invisible al usuario y una vez que se envie correctamente se va a ejecutar este simple código:

contacto.php:

1
2
3
4
5

<?php
if($_POST['mensaje'] != ''){
	echo $_POST['mensaje'];
}
?>

Lo que hacemos aca es un echo del mensaje enviado que aunque para el usuario pasa inadvertido , podremos mostrarlo con “responseText”.

Ver ejemplo
Descargar código

Si quieren ver un ejemplo de un formulario de contacto con AJAX, pueden probar este.

Espero que haya servido de ayuda. Un saludo a todos!!!

En uno de mis ultimos proyectos tuve la necesidad de crear un formulario donde el cliente pudiera añadir campos de texto a medida que lo fuera necesitando, y a su vez quitarlos si ya no le eran necesarios.

Esto se puede realizar de una forma muy sencilla con JQuery. Suponiendo que tenemos el siguiente código HTML

Con este código y añadiendole un poco de estilo tendriamos un pequeño formulario como el que muestra la imagen.

Ahora solo queda añadir unas cuantas lineas de JQuery para que funciones:

$(document).ready(function() {
//ACA le asigno el evento click a cada boton de la clase bt_plus y llamo a la funcion addField
$(".bt_plus").each(function (el){
$(this).bind("click",addField);
});
});

}


Como siempre debemos añadir la ultima version de JQuery y luego nuestro script.





Este mismo ejemplo se puede aplicar en cualquier otro lado, solo es cuestion de jugar un poco. Espero que les haya gustado. Saludoss

Ejemplo Online
Descargar Ejemplo