带有提交消息的PHP邮件表单淡入

Question

我的PHP电子邮件表单代码可以运行，但是提交消息后的输出不正确。

发送邮件后，它将在空白页上（URL www.domain.com/mailform.php）弹出“确定”回显，而不是淡出页面上的联系表单并淡出“成功发送”消息，而没有更改网址。

代码中的错误在哪里？ :(

HTML

<div class="contact-form-grid">
    <form method="post" name="contactForm" id="contactForm" action="sendEmail.php">
      <div class="fields-grid">
        <div class="styled-input agile-styled-input-top">
        <input type="text" for="contactName" id="contactName" name="contactName" required="" /> 
        <label>Dein Name</label></div>
        <div class="styled-input agile-styled-input-top">
        <input type="text" for="contactTel" name="contactTel" required="" /> 
        <label>Telefon</label></div>
        <div class="styled-input">
        <input type="email" for="contactEmail" id="contactEmail" name="contactEmail" required="" /> 
        <label>E-Mail</label></div>
        <div class="styled-input">
        <input type="text" for="contactSubject" id="contactSubject" name="contactSubject" required="" /> 
        <label>Betreff</label></div>
        <div class="clearfix"></div>
      </div>
      <div class="styled-input textarea-grid">
      <textarea name="contactMessage" required=""></textarea> 
      <label>Schreibe hier deine Nachricht!</label></div>
      <input type="submit" value="Senden" />
      <div id="submit-loader">
        <div class="text-loader">Senden...</div>
        <div class="s-loader">
          <div class="bounce1"></div>
          <div class="bounce2"></div>
          <div class="bounce3"></div>
        </div>
      </div>
    </form>
    <div id="message-warning"></div>
    <!-- contact-success -->
    <div id="message-success">Ihre Nachricht wurde abgeschickt, danke!
    <br /></div>
</div>

PHP

<?php
// Replace this with your own email address
$siteOwnersEmail = 'myemail@gmail.com';

if($_POST) {

$name = trim(stripslashes($_POST['contactName']));
$tel = trim(stripslashes($_POST['contactTel']));
$email = trim(stripslashes($_POST['contactEmail']));
$subject = trim(stripslashes($_POST['contactSubject']));
$contact_message = trim(stripslashes($_POST['contactMessage']));

// Check Name
if (strlen($name) < 2) {
    $error['name'] = "Bitte geben Sie Ihren Namen ein.";
}
// Check Email
if (!preg_match('/^[a-z0-9&\'\.\-_\+]+@[a-z0-9\-]+\.([a-z0-9\-]+\.)*+[a-z]{2}/is', $email)) {
    $error['email'] = "Bitte geben Sie eine korrekte E-Mail-Adresse ein.";
}
   // Subject
if ($subject == '') { $subject = "Anfrage"; }


// Set Message
$message .= "<strong>" . "Absender: " . "</strong>". $name . "<br />";
$message .= "<strong>" . "Email: " . "</strong>" . $email . "<br /><br />";
$message .= "<strong>" . "Telefon: " . "</strong>" . $tel . "<br /><br />";
$message .= "Nachricht: <br />";
$message .= $contact_message . "<br />";
$message .= "<br /> ----- <br /><i> Gesendet von .... </i></font><br />";

// Set From: header
$from =  $name . " <" . $email . ">";

// Email Headers
$headers = "From: " . $from . "\r\n";
$headers .= "Reply-To: ". $email . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=UTF-8";

if (!$error) {
$mail = mail($siteOwnersEmail, $subject, $message, $headers);

if ($mail) { echo "OK"; }
else { echo "Etwas ging schief! Probiere später nochmal."; }

} # end if - no validation error

else {

$response = (isset($error['name'])) ? $error['name'] . "<br /> \n" : null;
$response .= (isset($error['email'])) ? $error['email'] . "<br /> \n" : null;
$response .= (isset($error['message'])) ? $error['message'] . "<br />" : null;

echo $response;

} # end if - there was a validation error

}

?>

JS

/* local validation */
$('#contactForm').validate({

    /* submit via ajax */
    submitHandler: function(form) {

        var sLoader = $('#submit-loader');

        $.ajax({        

          type: "POST",
          url: "sendEmail.php",
          data: $(form).serialize(),
          beforeSend: function() { 

            sLoader.fadeIn(); 

          },
          success: function(msg) {

            // Message was sent
            if (msg == 'OK') {
                sLoader.fadeOut(); 
               $('#message-warning').hide();
               $('#contactForm').fadeOut();
               $('#message-success').fadeIn();   
            }
            // There was an error
            else {
                sLoader.fadeOut(); 
               $('#message-warning').html(msg);
                $('#message-warning').fadeIn();
            }

          },
          error: function() {

            sLoader.fadeOut(); 
            $('#message-warning').html("Etwas ging schief! Probiere später nochmal.");
             $('#message-warning').fadeIn();

          }

      });           
    }

});

我希望有人可以在这里帮助我：(

Answer 1

您的错误可能出在您的JavaScript中，页面在刷新后说“确定”吗？

使用ajax提交表单的更简单方法是：

$("#form").ajaxForm({
    url: "",
    beforeSubmit: function() {
    },
    success: function() {
    },
    error: function() {
    }
});

你有尝试过吗？