Make email form disappear after email is sent - jQuery

I'm currently trying to create an email form with Wordpress. I've gotten the form to function correctly, however I want to make it FadeOut when the email is successfully sent, but not when the email doesn't (e.g., when a field is left blank, etc). You can see for yourself here. Also below are the codes:

http://www.matthewruddy.com/demo/?page_id=719

<script type="text/javascript">
$(function() {

$('.contactform-main input#submit').click(function() {
    $('.preload-icon').html('<img src="<?php echo bloginfo('template_url'); ?>/lib/images/preload.gif" class="loaderIcon" alt="Loading." />');

    var name = $('input#name').val();
    var email = $('input#email').val();
    var comments = $('textarea.comments-text').val();
    var mailto = $('input#mailto').val();
    var admin = $('input#admin').val()

    $.ajax({
        type: 'post',
        url: '<?php echo bloginfo('template_url'); ?>/lib/functions/submit-email.php',
        data: 'name=' + name + '&email=' + email + '&comments=' + comments + '&mailto=' + mailto +'&admin=' + admin,

        success: function(results) {
            $('.contactform-main img.loaderIcon').fadeOut(600);
            $('div.response').html(<?php _e(results, 'lr_framework'); ?>);
        }
    }); // end ajax
});
});
</script>

And the PHP :

$name = trim($_POST['name']);
$email = $_POST['email'];
$comme开发者_运维技巧nts = $_POST['comments'];

$site_owners_email = $_POST['mailto']; // Replace this with your own email address
$site_owners_name = $_POST['admin']; // replace with your name

if (strlen($name) < 2) {
    $error['name'] = 'Please enter your name';
}

if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
    $error['email'] = 'Please enter a valid email address';
}

if (strlen($comments) < 3) {
    $error['comments'] = 'Please leave a comment.';
}

if (!$error) {

    require_once('phpMailer/class.phpmailer.php');
    $mail = new PHPMailer();

    $mail->From = $email;
    $mail->FromName = $name;
    $mail->Subject = "Website Contact Form";
    $mail->AddAddress($site_owners_email, $site_owners_name);
    $mail->Body = $comments;

    $mail->Send();

    ?><div class="success"><ul><li><?php printf('Congratulations %s, your message was successfully sent. Thank you!', $name); ?></li></ul></div><?php

} # end if no error
else {
    $response = (isset($error['name'])) ? "<li>" . $error['name'] . "</li> \n" : null;
    $response .= (isset($error['email'])) ? "<li>" . $error['email'] . "</li> \n" : null;
    $response .= (isset($error['comments'])) ? "<li>" . $error['comments'] . "</li>" : null;

    echo '<div class="error"><ul>'. $response .'</ul></div>';
} # end if there was an error sending

?>

Can anyone help?

    $.ajax({
        type: 'post',
        url: '<?php echo bloginfo('template_url'); ?>/lib/functions/submit-email.php',
        data: 'name=' + name + '&email=' + email + '&comments=' + comments + '&mailto=' + mailto +'&admin=' + admin,

        success: function(results) {
            $('.contactform-main img.loaderIcon').fadeOut(600);
            $('.contactform-main').fadeOut(600); // This will hide the form
            $('div.response').html(<?php _e(results, 'lr_framework'); ?>);
        }
    }); // end ajax

To clarify, success method checks for successful AJAX execution not for PHP code execution. So if you want to handle a PHP error in your jQuery code you need some index showing that e.g. True/False. To accomplish that you can use JSON.

PHP Example:

$response = array();
$result = $mail->send();
$response['result'] = $result;

if($result) {
    $response['message'] = 'The email was sent successfully!';
} else {
    $response['message'] = 'There was an error. Please try again!';
}

echo json_encode($response);

jQuery AJAX Example:

$.ajax({
      url: "email.php",
      global: false,
      type: "POST",
      data: ({text : "Your text here"}),
      dataType: "json",
      async:false,
      success: function(data){
         if(data["result"]) {
             alert(data["message"]); // Success
         } else {
             alert(data["message"]); // Fail
         }
      }
   }
)

But you should take the error/success box out of the form DIV tag or it will fade out too.

You can try sending back some response back to the AJAX function via your PHP, and handle if it was a success or error in the Javascript callback.