表单提交未显示成功消息

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.!')    ;   
 }

要回答您在 cmets 中提出的关于删除成功提交后收到的错误消息的其他问题，请执行以下操作。

为你的跨度添加额外的类，就像这里的例子

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