2011-02-13 16 views
24

Tengo una forma tales como:jQuery - Enviar una forma asíncrona

<form action='???' method='post' name='contact'> 
     <input type="text" class="inputContact" name="mittente" /> 
     <textarea class="textContact" name="smex"></textarea> 
     <input type="submit" value="Send" /> 
    </div> 
</form> 

Me gustaría enviar estos datos de forma asíncrona, trought función jQuery $.ajax.

EDIT: con la solución:

<form name='contactForm'> 
    <input type="text" class="inputContact" name="mittente" /> 
    <textarea class="textContact" name="smex"></textarea> 
    <input type="submit" value="Send" /> 
</form> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('form[name=contactForm]').submit(function(e){ 
     e.preventDefault(); 
     $.ajax({ 
      type: 'POST', 
      cache: false, 
      url: './ajax/header_ajax.php', 
      data: 'id=header_contact_send&'+$(this).serialize(), 
      success: function(msg) { 
       $("#boxContentId").html(msg); 
      } 
     }); 
    });  
});   
</script> 
+0

¿Qué es exactamente lo ¿tu quieres saber? Ya sabes que tienes que (o quieres) usar '$ .ajax'. Supongo que ya leíste su documentación. ¿Dónde estás atrapado? –

+0

Me gustaría saber cómo realizar $ .ajax haciendo clic en el botón "Enviar" – markzzz

+1

Solo una nota al margen: el uso del atributo 'name' en' form' se deprecia a partir de HTML4. El atributo 'id' debe usarse en su lugar. –

Respuesta

35
$('form[name=contact]').submit(function(){ 

    // Maybe show a loading indicator... 

    $.post($(this).attr('action'), $(this).serialize(), function(res){ 
     // Do something with the response `res` 
     console.log(res); 
     // Don't forget to hide the loading indicator! 
    }); 

    return false; // prevent default action 

}); 

Ver:

+5

¿Funciona también para la carga de archivos? – Hadesara

+0

De mis pruebas no es así. –

+0

@Hadesara archivo asíncrono carga aquí http://stackoverflow.com/questions/166221/how-can-i-upload-files-asynchronously#8758614 –

Cuestiones relacionadas