Mostrar formulario oculto y precesar con ajax
En este artículo vamos a explicar con detalle dos detalles que podrían incluirse en la mayoría de nuestras páginas Web.
Por un lado tendremos un formulario oculto que mostraremos mediante un link utilizando jQuery con los métodos hide() y show() y, por otro, el procesado de la información con jQuery y Ajax + PHP.
Como siempre que vamos a trabajar con jQuery, necesitaremos incluir en el <head> de nuestra página la librería además de los scripts necesarios.
<script type="text/javascript">
$(document).ready(function(){
$("#hide").click(function(){
$("#element").hide();
});
$("#show").click(function(){
$("#element").show();
});
});
</script>
El código anterior es el que se encarga de mostrar y ocultar el formulario utilizando las funciones hide() para ocultar y show() para mostrar el contenido de un contenedor con id=»element» que de entrada estará oculto.
Y para procesar el formulario:
<script type="text/javascript">
$(document).ready(function() {
$("#enviar-btn").click(function() {
var name = $("input#name").val();
var message = $("textarea#message").val();
var dataString = 'name=' + name + '&message=' + message;
$.ajax({
type: "POST",
url: "addmessage.php",
data: dataString,
success: function() {
$("#element").hide();
$('#newmessage').append('<h2>Tu información ha sido recibida correctamente!</h2><table><tr><td>Nombre:</td><td>'+name+'</td></tr><tr><td>Mensaje:</td><td>'+message+'</td></tr></table>');
}
});
return false;
});
});
</script>
La explicación del código anterior es simple, tras pulsar el botón con id=»enviar-btn», recogemos los datos del formulario para procesarlos en el archivo «addmessage.php» que recogerá los datos mediante el método POST para enviarlos por correo o guardarlos en una base de datos o para lo que te interese.
Al finalizar el proceso, informamos mediante el success de jQuery que la información se ha recibido correctamente y mostramos los datos recibidos.
En nuestro <body> tendremos algo como lo siguiente:
<a href="#" id="show">Mostrar</a> <div id="element" style="display: none;"> <div id="close"><a href="#" id="hide">cerrar</a></div> <form method="post" action=""> Nombre:<br/> <input type="text" id="name" name="name" size="40" /><br/><br/> Mensaje:<br/> <textarea name="message" id="message" rows="6" cols="40"></textarea> <br/><br/> <div style="margin-left: 376px;"><input name="submit" type="submit" value="enviar" id="enviar-btn" /></div> </form> </div>
Tenemos el link que abrirá el formulario y dentro del formulario tendremos otro link que lo cerrará y un botón para enviar la información.
Gracias a la tecnología Ajax la información se puede enviar y procesar sin necesidad de recargar toda la página. En el ejemplo en funcionamiento no se nota mucho el efecto pero si estuvieramos en una página con mucho contenido, podría ser un kaos si esta información tiene que ser enviada al servidor para ser procesada.
Autor
¿Buscas trabajo de programador?
6 respuestas a “Mostrar formulario oculto y precesar con ajax”
Deja una respuesta
179 artículos que te podrían interesar
Ver más sobre
Muy buena tu explicación ¿Cómo podría enviar esos datos a una tabla mysql?
Hola,
Haciendo referencia al ejemplo en funcionamiento, faltó explicar que hay un archivo «addmessage.php» que deberías crear y en el recibir los datos mediante el método post para registrar en la base de datos.
Para interactuar con una base de datos recomiendo que leas el siguiente tutorial:
https://www.jose-aguilar.com/blog/interactuar-con-una-base-de-datos-utilizando-mysqli/
Saludos
Una pregunta como seria el codigo php?
Hola buenas tardes,
El archivo addmessage.php es para armar la lógica de la programación. Eso dependerá de lo que desees hacer a la hora de enviar el formulario. En el caso del ejemplo, por seguridad no estamos haciendo nada, pero se podría enviar un email, registrar en la base de datos, etc.
Saludos
excelentes tus publicaciones, gracias por la info+
me encanto