En un post anterior expliqué como actualizar un elemento de la página sin recargar pero ahora voy a explicar como enviar un formulario para que este nos muestre la respuesta de PHP sin necesidad de recargar la página o redirigir a otra página.

Creando el formulario

Como verás a continuación el formulario no tiene nada de especial, es igual que cualquier otro, además he creado un div con el id «result» que es donde mostraremos el resultado de lo que enviemos.

1
2
3
4
5
6
7
8
9
10
<form id="fo3" action="envio.php" method="post" name="fo3">
<fieldset><legend>Perfil</legend>
<ol>
    <li><label>Nombres:</label><input name="fnombres" size="30" type="text" /></li>
    <li><label>Apellidos:</label><input name="fapellidos" size="30" type="text" /></li>
    <li><label>Correo:</label><input name="fcorreo" size="30" type="text" /></li>
</ol>
<input name="mysubmit" type="submit" value="Enviar" /></fieldset>
</form>
<div id="result"></div>

Implementando AJAX

Ahora viene la parte novedosa del script voy a hacer que jquery intercepte el evento submit y envie el formulario sin recargar la página.

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
<script src="jquery-1.3.min.js" language="javascript"></script>
<script language="javascript">// <![CDATA[
$(document).ready(function() {
   // Esta primera parte crea un loader no es necesaria
    $().ajaxStart(function() {
        $('#loading').show();
        $('#result').hide();
    }).ajaxStop(function() {
        $('#loading').hide();
        $('#result').fadeIn('slow');
    });
   // Interceptamos el evento submit
    $('#form, #fat, #fo3').submit(function() {
  // Enviamos el formulario usando AJAX
        $.ajax({
            type: 'POST',
            url: $(this).attr('action'),
            data: $(this).serialize(),
            // Mostramos un mensaje con la respuesta de PHP
            success: function(data) {
                $('#result').html(data);
            }
        })        
        return false;
    });
})
// ]]></script>

Puedes descargar los archivos del ejemplo dándole like o tweet al post y verás el link de descarga

[social-download button_id=»0dd1a843eab8616fe» dl_id=»http://www.miguelmanchego.com/wp-content/uploads/2009/01/jquery-form.zip» theme=»blue» message=»Share this page to start your download now!» facebook=»true» likeurl=»CURRENT» google=»true» googleurl=»CURRENT» tweet=»true» tweettext=»» tweeturl=»CURRENT» follow=»true» linkedin=»true» linkedinurl=»CURRENT»/]