Question

我的联系表单有问题，即使邮件已成功发送到电子邮件，但没有给出成功指示。表单对用户显示为中断，因为按下提交按钮时页面未更改。此页面是使用Themeforest模板构建的，但作者无法提供解决方案。我希望有人能指出我正确的方向。

这是我给出的股票'contact-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'id的元素。

所以这个将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>

表单提交未显示成功消息

2 个答案: