Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery - Send a form asynchronously

Tags:

jquery

ajax

forms

I have a form such as :

<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>  

I'd like to send these data asynchronously, trought jQuery function $.ajax.

EDIT :with solution :

<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> 
like image 381
markzzz Avatar asked Feb 13 '11 15:02

markzzz


1 Answers

$('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  }); 

See:

  • jQuery docs: post
  • jQuery docs: serialize
like image 103
James Avatar answered Oct 02 '22 17:10

James