Como enviar un formulario via AJAX con JQuery
Publicado en July 5, 2009 by Damian
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:
<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:
<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:
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!!!
Links Sponsors
Tags: ajax, JQuery, jquery.plugin
Categoría: JQuery, Tutoriales
Con tu lector preferido.
Via Email.
Por Twitter.
[...] 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