Como enviar un formulario via AJAX con JQuery
Categorías: JQuery, Tutoriales - Tags: ajax, formularios, JQuery, jquery.pluginHoy 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”.
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!!!
Acerca del autor
Damian
Programador en tiempos libres , amante de la tecnología, blogger amateur y emprendedor en sueños.
Sigueme:
[...] cuenta atras correspondiente. Además de la cuenta atras más adelante vamos a añadir un pequeño formulario de contácto con AJAX para añadir emails a una base de datos y asi poder mantener a los visitantes [...]
[...] en August 15, 2009 by Damian Hoy les voy a explicar como crear un formulario AJAX para nuestra página de lanzamiento y así poder crear una base de datos con los emails de nuestros [...]
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
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
me ha resultado muy util, muchas gracias
yo qiero mandar datos sin usar php
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
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!
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
[...] JQuery, Tutoriales – Tags: ajax, formularios, tutorial jqueryHace mucho tiempo escribí en el blog como enviar un formulario con AJAX y jQuery mediante el plugin jquery.form.js. A día de hoy y con mucha más experiencia en jQuery prefiero [...]