En esta ocasión les traigo como realizar un formulario simple con php y Ajax utilizando la famosa librera jquery. Siempre es importante tener el código a mano para realizar un copy and paste y facilitar las cosas al momento de realizar una web, ayuda mucho a acortar el tiempo de desarrollo de una forma gigantesca.
Ahora a lo prometido paso a explicar como funciona el código lo primero que debemos incluir a nuestro html seria la librería jquery lo pueden descargar desde la página oficial aquí les dejo el link https://jquery.com/download/
Una vez que lo tengamos incluido en nuestro código lo que nos queda es realizar el llamado y nuestro código javascript quedaría de esta forma:
<script>
$(document).ready(function(){
$('#dudas').submit(function(event) {
event.preventDefault();
$.ajax({
type: 'POST',
url: 'ajax/procesar_duda.php',
data: $('#dudas').serialize(),
beforeSend: function (objeto) {
$("#loader").html('<img src="img/buscador.gif">');
},
success: function (data) {
$(".salida").html(data).fadeIn('slow');
$("#loader").html("");
$('#nombre').val('');
$('#email').val('');
$('#web').val('');
$('#mensaje').val('');
}
});
});
});
</script>
El id dudas seria el declarado para el form lo que hacemos es quitar el submit para que pueda procesar el Ajax. La url es donde indicamos donde se quieren enviar los datos esta parte es muy importante ya que en algún lado debemos procesar el contenido que se ingresa. La función beforeSend nos muestra un loader para darle un poco de estética al formulario, se agrega una imagen con la url.
En success es donde damos la salida luego de una respuesta de nuestro código php podemos colocar en un class o id la salida o respuesta de nuestro archivo php, asi también declaramos para que los campos del formulario se limpien una vez realizado todo el proceso. Se pueden fijar que siempre declaramos un id identificatorio para que el jquery pueda realizar la tarea.
success: function (data) {
$(".salida").html(data).fadeIn('slow');
$("#loader").html("");
$('#nombre').val('');
$('#email').val('');
$('#web').val('');
$('#mensaje').val('');
}El ejemplo que quito es de esta web pueden ver que el formulario es el siguiente, para que puedan ver es el formulario donde se pueden dejar los mensajes en el post. El html seria algo de este modo.
<form class="post-reply" id="dudas">
<div class="row">
<div class="col-md-4">
<div class="form-group">
<span>Nombre *</span>
<input class="input" type="text" name="nombre" id="nombre" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<span>Correo *</span>
<input class="input" type="email" name="email" id="email" required>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<span>Web</span>
<input class="input" type="text" name="web" id="web">
</div>
</div>
<div class="col-md-12">
<div class="form-group">
<textarea class="input" name="message" placeholder="Mensaje" id="mensaje" required></textarea>
</div>
<input type="hidden" name="vader" value="0">
<input type="hidden" name="lover" value="<?php echo base64_encode($_GET['id'])?>">
<button class="primary-button">Publicar</button>
</div>
</div>
</form>
</div>
<div id="loader"></div>
<div class="respuesta"></div>
Vemos que se encuentran dos <div> debajo del formulario son los div de respuesta que mas arriba indique como respuesta del php
Nuestro archivo php podemos realizar un print_r y ver los datos que nos trae para luego hacer lo que necesitemos
<?php print_r($_POST); ?>
