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代码执行。因此，如果您想在jQuery代码中处理PHP错误，则需要一些索引来显示例如：真假。为此，您可以使用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 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
         }
      }
   }
)

但你应该从DIV标签中取出错误/成功框，否则它也会淡出。

Answer 2

您可以尝试通过PHP将一些响应发送回AJAX函数，并在Javascript回调中处理成功或错误。

发送电子邮件后，使电子邮件表单消失 - jQuery

2 个答案: