Question

I want to implement AJAX into a contact form, here is the code I have so far…

$("#contact_form").validate({
     meta: "validate",
     submitHandler: function (form) {
             $('#contact_form').hide();
             $('#sucessmessage').append("<h4 class='form_thanks'>Thanks, your email has been sent! We will get back to you as soon as possible</h4>");
             return false;
             form.submit();
     },
     /* */
     rules: {
             name: "required",

lastname: "required",
             // simple rule, converted to {required:true}
             email: { // compound rule
                     required: true,
                     email: true
             },
             subject: {
                     required: true,
             },
             message: {
                     required: true
             }
     },
     messages: {
             name: "Please enter your name.",
lastname: "Please enter your last name.",
             email: {
                     required: "Please enter email.",
                     email: "Please enter valid email"
             },
             subject: "Please enter a subject.",
             message: "Please enter a message."
     },
}); /*========================================*/
});

How do I implement AJAX jQuery code into this (posting to a PHP file)?

Thanks

Matt

EDIT: Sorry about the indentation, I’m tidier than that, I blame Dreamweaver though! 😛

Answer 1

Add this function:

$('#contact_form').submit(function(){
    $.post($(this).attr('action'), $(this).serialize(), function(data){
        // whatever you want to do post submit
    });
    return false;
});

Not tested though.. You may need to add it in the “form.submit” section depending on how the other part of code looks like.