05Jul 2009 19 Comments */?>

Como enviar un formulario via AJAX con JQuery

Categorías: JQuery, Tutoriales - Tags: , , ,

Hoy en dia y gracias a JQuery cualquiera puede implementar AJAX en sus webs para hacerlas más dinámicas. Hoy debido a todo el tema de la fiebre porcina cierran los boliches así que ya que me quedo en casa aprovecho y les cuento como poder usar el plugin jquery.forms para enviar un formulario mediante AJAX de una forma super sencilla.

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!!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Pingback: Como crear una página de lanzamiento con PHP, AJAX y JQuery | Timersys()

  • Pingback: Como crear una página de lanzamiento con PHP, AJAX y JQuery - II Parte | Timersys()

  • Alan

    hola me podrias decir como hacerlo en el caso que quiera almacenar la informacion del formulario en una base de datos mysql porfavor te lo agradeceria mucho 🙂

    • Pondrias todas tus funciones en la página contacto.php como haces normalmente sin AJAX. Podes echar un vistazo a este artículo que puede que te sirva de ayuda.
      En otras palabras la variable $_POST['mensaje'] la ingresarias en la base de datos con "INSERT INTO mensajes (usuario, mensaje) VALUES ('$usuario', '$mensaje')";
      Creo que es eso lo que preguntas

      • Fercho_080579

        mi amigo  como enviar una imagen por medio de ajax de jquery y un modal form de jquery ui con sus funciones de buttons:

        
        $(&quot;#create-cliente&quot;).button().click(function() {    $(&quot;#dialogoFormulario&quot;).dialog({        height:'auto',        width:400,        modal: true,                buttons:         {            &quot;Guardar&quot; : function()             {                var validacion=$(&quot;#formAjax&quot;).validationEngine('validate');                if(validacion == true)                {                                         str = $(&quot;#formAjax&quot;).serialize();                    alert(str);                    $.ajax                        ({                            url:&quot;guardar.php&quot;,                            data: str,                            type: &quot;POST&quot;,                                                 beforeSend: function()                                        {                                                                           $(&quot;#loader&quot;).show();                                        },                            success: function(respuesta)                                    {                                                                                                                  alert(respuesta);                                       $(&quot;#loader&quot;).hide();                                                                             },                                                                                                 });                }                                                                },            &quot;Cancelar&quot;:function() {$('#formAjax').validationEngine('hide'); $(this).dialog('close'); $('form')[0].reset();},        }    });    });} );
        
        

         

  • Federico

    Muy bueno, pero no lo puedo hacer funcionar si tengo el formulario en un "dialog" ej:

    $('#addUsu-caja').dialog({

    autoOpen: false,

    width: 450,

    height: 520,

    resizable: true,

    buttons: {

    "Cerrar": function() {

    $(this).dialog("close");

    }

    }

    });

    $('#addUsu-caja').bind('submit', function() {

    $(this).ajaxSubmit({

    target: '#output'

    });

    return false; // <– important!

    });

    Podrias poner un ejemplo relacionado a la mezcla del plugin y el dialog

    Gracias, saludos

  • jcesar

    me ha resultado muy util, muchas gracias

  • sonia

    yo qiero mandar datos sin usar php

  • Jorge Jarava

    Hola he estado utilizando el plugin con la version 1.2.3 de jquery pero requiero utilizar la 1.4.1 y no me funciona el plugin….me podrias dar alguna sugerencia…Gracias

  • Mau

    Loco!!! gracias por poner el ejemplo!! porque el sitio del plugin, no muestra un simple ejemplo andando. Asi que gracias.
    Para los que lo quieran probar, una vez que lo bajen deben apuntar bien la libreria del plugin dentro del html.
    Saludos!

  • sirius

    hola discula, ya uso ajax en jquery para cargar una pagina (tengo un index.php que llama por ajax a un login.php), el problema es que el form para mi esta dentro de ese login, he colocado lo que tienes de jquery dentro de una funcion a la que llamo cuando termino de cargar el ajax, pero entonces no me carga el login.php como si tuviera un error el codigo,

  • Es una funcion interesante en la que se puede lograr de una manera rapida para usar el plugin jquery.forms para enviar un formulario mediante AJAX de una forma sencilla y rapida

  • Pingback: Enviar formularios con AJAX y jQuery parte II()

  • Andres Sossa

    Gran aporte bastante funcional, espero aprovecharlo bn. Gracias.

  • Vampire_in2000

    estoy buscado informacion como mandar datos con jquery ajax pero de un un formulario dentro de un while solo me deja mandar del primer form pero del while son mas de uno gracias

  • Patodeth

    Puedo poner dos submit? y luego hacer el isset con el post de uno o de otro sin que el submit llegue null??

  • Nestor

    hola amigo he probado el ejemplo y funciona bien pero el detalle es cuando, agrego un elemento de tipo file para subir archivo no me funciona.

    por favor podrias implementar un ejemplo con elemento tipo file para subir imagene

    gracias.

    aqui te envio el codigo que estuve modificando pero nada

    contacto.php

    • nestor
  • Manuel

    Tengo un problema…. el codigo me funciona…. lo que no puedo hacer es cuando me aparece la nueva seccion no me funcionan los fancybox
    AYUDENMEEEE PORVABOR