表單提交不顯示成功消息

Question

即使郵件已成功發送至電子郵件，但我的聯繫表單中沒有提供成功指示，但存在問題。該窗體對用戶顯示爲中斷，因爲按下提交按鈕時頁面未更改。此頁面是使用Themeforest模板構建的，但作者無法提供解決方案。我希望有人能指引我朝着正確的方向前進。

這是我得到的股票的接觸send.php'文件：

<?php 


$names = $_POST['names']; 
$email = $_POST['email_address']; 
$comment = $_POST['comment']; 
$to ='to@email.com'; 

$message = ""; 
$message .= "*Name: " . htmlspecialchars($names, ENT_QUOTES) . "<br>\n"; 
$message .= "*Email: " . htmlspecialchars($email, ENT_QUOTES) . "<br>\n"; 
$message .= "*Comments: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n"; 
$lowmsg = strtolower($message); 

$headers = "MIME-Version: 1.0\r\nContent-type: text/html; charset=iso-8859-1\r\n"; 
$headers .= "From: \"" . $names . "\" <" . $email . ">\r\n"; 
$headers .= "Reply-To: " . $email . "\r\n"; 
$message = utf8_decode($message); mail($to, "Note from the Contact Form", $message, $headers); 

if ($message){ 
     echo 'sent'; 
}else{ 
     echo 'failed'; 
} 
?> 

這是股票的html代碼：

 <form id="contact-form" name="contact-form" action="" method="post"> 
      <label class="contact-label">Name*</label> 
      <input class="contact-input" type="text" name="contact-names" value="" /><br /><span class="name-required"></span> 
      <label class="contact-label">Email*</label> 
      <input class="contact-input" type="text" name="contact-email" value="" /><br /><span class="email-required"></span> 
      <label class="contact-label">Message*</label> 
      <textarea name="comments" rows="2" cols="20" class="contact-commnent"></textarea><br /><span class="comment-required"></span> 
      <input type="submit" value="Send" id="submit-form" class="button lightred contact-submit" /> 
     </form> 

此文件附加到HTML頁面作爲好：（juery-contact.js）

$(document).ready(function(){ 
    $('#submit-form').click(function(){ 

    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 
    var names    = $('#contact-form [name="contact-names"]').val(); 
    var email_address = $('#contact-form [name="contact-email"]').val(); 
    var comment   = $.trim($('#contact-form .contact-commnent').val()); 
    var data_html ='' ; 


       if(names == ""){ 
        $('.name-required').html('Your name is required.'); 
       }else{ 
        $('.name-required').html(''); 
       } 
       if(email_address == ""){ 
        $('.email-required').html('Your email is required.'); 
       }else if(reg.test(email_address) == false){ 
        $('.email-required').html('Invalid Email Address.'); 
       }else{ 
        $('.email-required').html(''); 
       } 

       if(comment == ""){ 
        $('.comment-required').html('Comment is required.'); 
       }else{ 
        $('.comment-required').html(''); 
       } 

     if(comment != "" && names != "" && reg.test(email_address) != false){ 

      data_html = "names="+ names + "&comment=" + comment + "&email_address="+ email_address; 

      //alert(data_html); 

      $.ajax({ 
        type: 'post', 
        url: 'contact-send.php', 
        data: data_html, 
        success: function(msg){ 
        if (msg == 'sent'){ 
          $('#success').html('Message sent!')  ; 
          $('#contact-form [name="contact-names"]').val(''); 
          $('#contact-form [name="contact-email"]').val(''); 
         $('#contact-form .contact-commnent').val(''); 

         }else{ 
          $('#success').html('Mail Error. Please Try Again.!') ; 
         } 
        } 
      }); 

     } 

     return false; 
    }) 
}) 

這裏是直播網站，如果你需要它：http://shamrockmasonry.ca/contact.html

任何幫助，將不勝感激！

Answer 1

我看了一下源代碼，發現有不符合「#SUCCESS」身份證的元素。

所以這個代碼塊，增加了HTML郵件#SUCCESS元素不能這樣做，因爲該元素實際上不存在：

if (msg == 'sent'){ 
    $('#success').html('Message sent!'); 
    $('#contact-form [name="contact-names"]').val(''); 
    $('#contact-form [name="contact-email"]').val(''); 
    $('#contact-form .contact-commnent').val(''); 
}else{ 
    $('#success').html('Mail Error. Please Try Again.!') ; 
} 

要回答你的，你在努力爲去除額外的問題成功提交後獲得的錯誤消息請執行以下操作。

添加其他類的跨度的，就像例如在這裏

<span class="email-required error-message"></span> 
<span class="name-required error-message"></span> 
<span class="comment-required error-message"></span> 

而此行的代碼添加到您的jQuery塊：

if (msg == 'sent'){ 
    $('#success').html('Message sent!'); 
    $('#contact-form [name="contact-names"]').val(''); 
    $('#contact-form [name="contact-email"]').val(''); 
    $('#contact-form .contact-commnent').val(''); 
    $('.error-message').empty(); // clears all of the current error messages on success 
}else{ 
    $('#success').html('Mail Error. Please Try Again.!') ; 
} 

所以加上面#SUCCESS ID的div元素你的表格標籤，你應該很好。

希望它有幫助。

Answer 2

形式HTML

之前添加<div id="success"></div>應該是：

<div id="success"></div> 
<form id="contact-form" name="contact-form" action="" method="post"> 
    [...] 
</form>