Сделать так, чтобы форма электронной почты исчезла после отправки письма - jQuery

Question

Я сейчас пытаюсь создать форму электронной почты с Wordpress.Я получил форму для правильной работы, однако я хочу сделать ее FadeOut, когда электронная почта успешно отправлена, но не когда электронная почта не работает (например, когда поле оставлено пустым и т. Д.).Вы можете убедиться сами здесь.Также ниже приведены коды:

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>

И PHP:

$name = trim($_POST['name']);
$email = $_POST['email'];
$comments = $_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

?>

Может кто-нибудь помочь?

Answer 1

    $.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

Для пояснения, метод success проверяет успешное выполнение AJAX, а не выполнение кода PHP.Поэтому, если вы хотите обработать ошибку PHP в своем коде jQuery, вам нужен индекс, показывающий это, например, True / False.Для этого вы можете использовать JSON .

PHP Пример:

$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 Пример :

$.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
         }
      }
   }
)

Но вы должны вынуть окно ошибки / успеха из тега DIV формы, иначе оно тоже исчезнет.

Answer 2

Вы можете попытаться отправить обратно некоторый ответ обратно в функцию AJAX через ваш PHP и обработать, если это было успешно или ошибка в обратном вызове Javascript.