need a confirmation text to appear on email submission

Question

With help of other relevant posts here, I have put together a code which allows the users to send me a list of selected posts via e-mail and it is working fine.

Now, I would like a confirmation text eg. 'THANK YOU' appear to the user, once user has clicked the "send email" button. This could appear below the submit button and could have a class so that I could make it a bit pretty using css. I hope this can be achieved with appropriate changes in my codes. Please suggest a correction.

UPDATED : Now my javascript looks like this :

    <script type="text/javascript">
jQuery(document).ready(function($) {
    $('#sendEmail').click(function(){
             $.ajax({
                 type: 'POST',
                 url: 'http://xxxxxxxxxxxxxxx/email.php',
                 data: { content: $('#email-data').html()},
                 success:function(data) {
                        alert('You data has been successfully e-mailed');
                }        
           });
     });
});
</script>

and my HTML looks like this :

<div id="email-data">
    <div id="content">
        some php generated content
    </div>
</div>
<a id="sendEmail"> SEND EMAIL</a>

my email.php looks like this

<?php

  $to = "[email protected]";
  $subject = "FROM WEBSITE";
  $message = $_POST['content'];
  $headers = "From: company <[email protected]>" . "\r\n" .
             "Content-type: text/html" . "\r\n";
  mail($to, $subject, $message, $headers);
?>

Please let me know if I am not clear enough.

Answer 1

Simply add a Success callback to your Ajax function:

     $('#sendEmail').click(function(){
             $.ajax({
                 type: 'POST',
                 url: 'www.example.com/email.php',
                 data: { content: $('#email-data').html()},
                 success:  function(data) {
                 //data variable can be used if your ajax call returns something
                     do_stuff_here();
                 }
             });
          });

In your case, you could do something like

success:  function() {
    $('body').append('<div class="success">Success!</div>');
}

However, is there a reason you don't want to use a and the .submit() method? (http://api.jquery.com/submit/)

Also, don't forget to validate :)