34

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>
markzzz
  • 47,390
  • 120
  • 299
  • 507
  • What exactly do you want to know? You already know that you have to (or want to) use `$.ajax`. I guess you already read its documentation. Where are you stuck? – Felix Kling Feb 13 '11 at 15:48
  • I'd like to know how to perfom $.ajax by clicking on the button "Send" – markzzz Feb 13 '11 at 15:51
  • 1
    Just a side note: using the `name` attribute in `form` is depreciated as of HTML4. The `id` attribute should be used instead. – dav_i May 13 '14 at 10:29

1 Answers1

46
$('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:

Cameron Pope
  • 7,565
  • 2
  • 26
  • 24
James
  • 109,676
  • 31
  • 162
  • 175