Question

我在这里使用教程：http://designwoop.com/2012/07/tutorial-coding-a-jquery-popup-modal-contact-form/和正确发送数据的表单。但是，单击提交后，表单只显示“发送”消息，而不是显示确认消息。当我在本地和我的开发环境中测试时会发生这种情况。我的控制台中没有看到任何错误消息。

这是我第一次使用ajax，我是jQuery / JavaScript的新手。不知道这里有什么问题。似乎它没有将数据读取为真。我将True更改为False以查看会发生什么，但仍然无效。有人可以帮忙吗？

仅供参考我在已经调用1.3.2 jQuery库并且无法删除引用的站点上实现此功能，因此我必须使用noConflict。当我仅引用旧库时，这不起作用。

我的目标是创建一个在用户进入网站时弹出的模态，但如果设置了cookie或者他们输入的页面上已经存在特定的div，则不会创建模式。

以下是脚本：

          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
          <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
          <script type="text/javascript" src="/wcsstore/CVWEB/images/home/js/jquery.fancybox.js?v=2.0.6"></script> 

    <script type="text/javascript">
    var jQuery_1_7_2 = jQuery.noConflict(true);
    function validateEmail(email) { 
        var reg = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
        return reg.test(email);
    }
    jQuery_1_7_2(document).ready(function(){
            var emailFormExists = jQuery_1_7_2('#e2ma_signup_form');
            if (document.cookie.indexOf('visited=true') == -1 && !(emailFormExists.length)){
                var fifteenDays = 1000*60*60*24*15;
                var expires = new Date((new Date()).valueOf() + fifteenDays);
                document.cookie = "visited=true;expires=" + expires.toUTCString();
                jQuery_1_7_2.fancybox({width:"100%", inline:true, href:"#inline"});
            }
            else
            {
            jQuery_1_7_2('#e2ma_signup_form').length
                var fifteenDays = 1000*60*60*24*15;
                var expires = new Date((new Date()).valueOf() + fifteenDays);
                document.cookie = "visited=true;expires=" + expires.toUTCString();  
            }
        jQuery_1_7_2("#contact").submit(function() { return false; });


    jQuery_1_7_2("#send").on("click", function(){
        var emailval  = jQuery_1_7_2("#email").val();
        var mailvalid = validateEmail(emailval);

        if(mailvalid == false) {
            jQuery_1_7_2("#email").addClass("error");
        }
        else if(mailvalid == true){
            jQuery_1_7_2("#email").removeClass("error");
        }

        if(mailvalid == true) {
            // if both validate we attempt to send the e-mail
            // first we hide the submit btn so the user doesnt click twice
            jQuery_1_7_2("#send").replaceWith("<em>sending...</em>");

            jQuery_1_7_2.ajax({
                type: 'POST',
                url: 'http://lcoawebservices.com/scripts/email-opt-in.php',
                data: jQuery_1_7_2("#contact").serialize(),
                success: function(data) {
                    if(data == "true") {
                        jQuery_1_7_2("#contact").fadeOut("fast", function(){
                            jQuery_1_7_2(this).before("<p><strong>Thanks for opting in!</strong></p>");
                            setTimeout("jQuery_1_7_2.fancybox.close()", 1000);
                        });
                    }
                }
            });
        }
    }); 
                });
            </script>

这是HTML：

            <div id="inline">
                <h2>Join the our mailing list!</h2>

                <form id="contact" name="contact" action="#" method="post">
                    <label for="email">Your E-mail</label>
                    <input type="email" id="email" name="email" class="txt">
                    <button id="send">Send E-mail</button>
                </form>
            </div>

这是php（我也是新手）

        <?php
        $sendto   = "llantz@lecreuset.com";
        $usermail = $_POST['email'];
        $content  = nl2br($_POST['msg']);

        $subject  = "New Feedback Message";
        $headers  = "From: " . strip_tags($usermail) . "\r\n";
        $headers .= "Reply-To: ". strip_tags($usermail) . "\r\n";
        $headers .= "MIME-Version: 1.0\r\n";
        $headers .= "Content-Type: text/html;charset=utf-8 \r\n";

        $msg  = "<html><body style='font-family:Arial,sans-serif;'>";
        $msg .= "<h2 style='font-weight:bold;border-bottom:1px dotted #ccc;'>New User Feedback</h2>\r\n";
        $msg .= "<p><strong>Sent by:</strong> ".$usermail."</p>\r\n";
        $msg .= "<p><strong>Message:</strong> ".$content."</p>\r\n";
        $msg .= "</body></html>";


        if(@mail($sendto, $subject, $msg, $headers)) {
            echo "true";
        } else {
            echo "false";
        }

        ?>

Answer 1

我弄清楚了 - 这是由于跨域访问问题。我还没有关于如何解决它的答案，但想发布这个，所以没有其他人花时间看我的代码，试图解决它。

表单提交后未显示确认消息 - jQuery / Ajax

1 个答案: