Question

here is php mailer.php file

<?php

$to = "[e-mail]";
$subject = "Contact via website";
$name_field = $_REQUEST['name'];
$email_field = $_REQUEST['email'];
$message = $_REQUEST['message'];

$body = "From: $name_field\n E-Mail: $email_field\n Message:\n $message";

mail($to, $subject, $body);

?>

here is jquery code

$('.submit').click(function(){
            $('span.msg').css({'visibility': 'visible'}).text('Sending...');
            $.post("mailer.php", $(".contactPage").serialize(),
                function(data){
                    $('span.msg').text('Your Message has been received. Thank you').show();
                });

            return false;    

here is html code

<div class="contactPage">   
    <label>Name</label>
    <input type="text" name="name" class="txt" />
    <label>Email</label>
    <input type="text" name="email" class="txt" />
    <label>Message</label>
    <textarea class="txt_area" name="message" rows="5" cols="30"></textarea>        
    <input type="button" class="submit" value="" />
    <span class="msg">Your Message has been received. Thank you</span>  
</div>
        });

but i am getting empty email….

Answer 1

.serialize() only works on a <form> element, so you need to replace this:

<div class="contactPage">   

With this (and the matching closing tag).:

<form class="contactPage">  

Also use the submit event to be safe, like this:

$('.contactPage').submit(function(){
  $('span.msg').css({'visibility': 'visible'}).text('Sending...');
  $.post("mailer.php", $(this).serialize(), function(data){
    $('span.msg').text('Your Message has been received. Thank you').show();
  });
  return false;
});

Here’s a demo showing how serializing <div> doesn’t work, but a <form> does 🙂