Enviar un formulario por Ajax con Mootools

  • Por
Cómo enviar un formulario con Ajax y mostrar los resultados en la propia página sin recargarla, con Mootools.
En nuestro Manual de Mootools hemos aprendido las cosas más básicas para empezar a trabajar con este framework Javascript y hacer cómodamente algunas cosas que sin él sería mucho más difícil. Una de las facilidades que podemos utilizar de Mootools es la realización de scripts Ajax, sin tener que complicarnos con las particularidades de los distintos navegadores. En este artículo de DesarrolloWeb.com queremos mostrar la facilidad con la que podemos enviar un formulario con Ajax usando Mootools.

Por ahora vamos a intentar presentar un formulario muy sencillo y cómo podemos enviarlo con Ajax utilizando el menor número de líneas de código posibles. Luego complicaremos el ejemplo, para añadir efectos y otras cosas interesantes, pero lo vamos a dejar para próximos artículos, por no complicarnos ahora, que esto es una mera introducción al envío de formularios con Ajax. En desarrollo web .com iremos publicando nuevos artículos sobre el tema, para ir mostrando las posibilidades y ventajas de usar Mootools para el trabajo con Ajax.

Como siempre hacemos, os dejamos el link para ver el ejemplo que vamos a realizar en marcha.

Referencia: en artículos anteriores ya hemos visto otros ejemplos de Ajax con Mootools. Consultar el artículo Ajax con Mootools.

Código HTML

Pasamos directamente a mostrar el código HTML del formulario:

<form id="miformulario" action="recibe-formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="20">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<input type="submit" value="Enviar">
</form>


Como se puede ver, es un formulario exactamente igual a cualquiera realizado con HTML. Está compuesto por sólo dos campos de texto y un botón de submit.

Cabe destacar que el formulario se envía a la página recibe-formulario.php y que se va a enviar por POST.

Código Javascript para enviar el formulario por Ajax

Ahora vamos a ver el código Javascript, utilizando Mootools, que requeriría la pagina para utilizar Ajax en el envío del formulario. El script es muy sencillo y lo he comentado para que se pueda entender mejor. Ahora bien, si no conocemos previamente un poco de Mootools nos sonará a chino. Así que recodar la referencia al Manual de Mootools o a la documentación del propio framework.

window.addEvent('domready', function() {
   //Vamos a recibir el elemento formulario
   elementoFormulario = $("miformulario");
   //Vamos a añadir un evento al formulario para cuando se envíe
   elementoFormulario.addEvent('submit', function(e) {
      //primero voy a parar el evento para que no se envíe como lo haría normalmente
      e.stop();
      //Aquí podríamos hacer acciones como mostrar la típica imagen de cargando de Ajax
      //Luego definimos qué hacer cuando se envía el formulario
      //Aquí "this" se refiere al formulario sobre el que defino el evento
      this.set('send', {
         //onComplete sirve para definir qué hacer cuando se recibe la respuesta
         onComplete: function(respuesta) {
            //escribo la respuesta en la capa "resultado"
            $("resultado").set('html', respuesta);
         }
      });
      //Envío el formulario
      this.send();
   });
});


Básicamente lo que se hace es crear un evento para ejecutar cuando el formulario se envíe (evento submit). El evento lo programamos para que se detenga el proceso habitual de submit y a continuación codificamos el envío con Ajax.

Para enviar un formulario con Ajax desde Mootools, lo único que tenemos que hacer es ejecutar el método send() del elemento formulario:

formulario.send();

Pero claro, antes tenemos que decirle qué queremos hacer cuando se complete el envío y cómo mostrar la respuesta recibida después de ello. Para ello tenemos que definir otro evento onComplete, que asociamos al envío "send".

El evento onComplete recibe un parámetro que es el texto que se recibe como respuesta al procesar el formulario. Dentro de onComplete podremos hacer lo que queramos con la respuesta del procesamiento del form. La respuesta se generará mediante un lenguaje de programación del lado del servidor, como PHP, .NET, ASP, o lo que queramos.

Este código Javascript se podría ampliar mucho con tantos efectos o utilidades como necesitemos, como mostrar una imagen de carga. Repito que tenemos planificada la publicación de artículos adicionales sobre este tema en desarrolloweb .com, donde veremos con detalle más adelante estos usos.

Código PHP para procesar el formulario

La respuesta de procesar el formulario se genera en el script que lo recibe. Si nos fijamos en el código HTML del formulario, veremos que el action="recibe-formulario.php". Así que tendremos que crear ese archivo PHP para recibirlos datos y hacer algo con ellos.

<?
echo "Nombre: " . $_POST["nombre"];
echo "<br>";
echo "Edad: " . $_POST["edad"];
?>


Esto es lo más sencillo que podemos hacer con el formulario, simplemente mostrar sus datos. Para ello hacemos unos cuantos echo de PHP. Todo lo que se escriba en la página mediante PHP se recibirá como respuesta de la solicitud Ajax.

Todo el código del ejemplo de procesamiento de formulario en Ajax

Veamos todo el código junto.

<html>
<head>
   <title>Ejemplo de envío de formulario por Ajax con Mootools</title>
<script src="mootools-1.2.js" type="text/javascript"></script>
<script>
window.addEvent('domready', function() {
   //Vamos a recibir el elemento formulario
   elementoFormulario = $("miformulario");
   //Vamos a añadir un evento al formulario para cuando se envíe
   elementoFormulario.addEvent('submit', function(e) {
      //primero voy a parar el evento para que no se envíe como lo haría normalmente
      e.stop();
      //Aquí podríamos hacer acciones como mostrar la típica imagen de cargando de Ajax
      //Luego definimos qué hacer cuando se envía el formulario
      //Aquí "this" se refiere al formulario sobre el que defino el evento
      this.set('send', {
         //onComplete sirve para definir qué hacer cuando se recibe la respuesta
         onComplete: function(respuesta) {
            //escribo la respuesta en la capa "resultado"
            $("resultado").set('html', respuesta);
         }
      });
      //Envío el formulario
      this.send();
   });
});
</script>
</head>

<body>


<form id="miformulario" action="recibe-formulario.php" method="post">
Nombre: <input type="text" name="nombre" size="20">
<br>
Edad: <input type="text" name="edad" size="3">
<br>
<input type="submit" value="Enviar">
</form>
<div id="resultado"></div>
</body>
</html>


Para que este código funcion faltaría el script PHP para procesar el formulario, que estaría en un archivo aparte, en el mismo directorio que el código HTML.

Nota: Para que el ejemplo funcione tenemos que ponerlo en un servidor web, porque el envío se realiza por http y porque la página PHP debe ser interpretada y procesada por el servidor web.

Podemos ver este ejemplo en marcha en una página aparte.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Andres

25/2/2009
Esta funcion esta genial. Me gustaria saber si es posible adaptarla para que funcione en mootools 1.1 asi la podemos utilizar para desarrollar sobre plataforma joomla (que de momento utiliza mootools 1.1 solamente).

Humberto Prada

20/4/2009
enviar formulario con boton personalizado
Cordial saludo.

realicé la prueba tal como se describe y funciona perefectamete. Pero, no me funciona si utilizo un boton personalizado que me haga lo mismo que el botón submit( o un hipervínculo).

Si conocen alguna forma de aplicarle ese cambio y la pueden compartir.

De antemano muchas gracias.

estela_lopez

11/5/2009
importante manual
hola gracias por permitirne ser parte de desarrollo web me son de mucha utilidad los manuales soy estudiante aprendis de paginas web nuevamente gracias

zonademanel

25/7/2009
Gracias
Muchas gracias, recientemente inicio en la programación web, había estado batallando un poco con Ajax y mootools, ya que había encontrado algunos ejemplos pero no había podido correrlos en mi maquina, pero estos están excelentes y muy bien explicados, felicitaciones y muchas gracias.

Jairo

20/10/2010
Imagen cargando
Te felicito por tu articulo, muy util, lo que no encuentro hacer es que muestre la imagen o texto Cargando...

Puede ser una linea asi?

//Aquí podríamos hacer acciones como mostrar la típica imagen de cargando de Ajax
document.getElementById(id_contenedor).innerHTML = "<p><blink><font color='#FF0000'><b>CARGANDO...</b></font></blink></p>";

o como se hace
gracias

Geovany

31/5/2012
Agradecimiento
Verdaderamente muchas gracias x toda la información que nos brindan a través de este medio. He aprendido mucho con los manuales y tutoriales que han publicado. Mil veces gracias...

Iniciado

16/1/2014
Limpiar el texto de los campos
El código está muy bien aunque el texto introducido en los campos del formulario no se borran un vez pulsado el botón para enviar. Para que esto ocurra hay que refrescar la página, con lo que se pierde la esencia para la que se creó éste código.
Sería muy interesante conocer alguna mejora para evitar sobrescribir (o borrar), sobre el texto anteriormente escrito en los campos del formulario.

Excelente web para los que se inician en éste mundillo.