.ajax和.click不想在简单的联系表格上为我工作

Question

我正在从一个框架中严重构建的webstie中剥离出一些html / css。 此联系表单适用于使用框架的站点，但当我将其剪切并粘贴到其自己的文件集中时，单击提交按钮时，我得不到任何响应。 该文件包含多个包含页眉，页脚和右侧联系表单的内容。 header.php文件有很多不相关的代码和几个JS和CSS库的重要链接：

<link href="/media/css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="/media/css/stylesheet.css" rel="stylesheet" type="text/css" />
<link href="/media/css/responsive.css" rel="stylesheet" type="text/css" />
<link href="/media/css/font-awesome.css" rel="stylesheet" type="text/css" />
<script src="/media/js/jquery-latest.min.js" type="text/javascript" ></script>
<script src="/media/js/bootstrap.js" type="text/javascript"></script>
<script src="/media/js/jquery.anchor.js" type="text/javascript"></script>
<script src="/media/js/bootstrap-select.js" type="text/javascript"></script>
<!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

页面的主要内容部分包含一些静态内容和联系表单的包含。 联系表格是：

    <div class="right-section col-md-3 col-sm-3">
    <div class="row">
    <div class="Login-form">
    <div class="login-top"><h1>Drop Us A Message</h1></div>
    <div class="login-body">
     <div class="successHolder topMargin whiteText" id="basicsSuccess">
              Thank you. Your message has been sent. We will get back to you shortly.
     </div>
     <div class="errorsHolder" id="contactFormErrors">
            Please correct the following errors;

            <ul>
                <span id="nameErrorShow" style="display:none;"><li><span id="nameError"></span></li></span>
                <span id="emailErrorShow" style="display:none;"><li><span id="emailError"></span></li></span>
                <span id="phoneErrorShow" style="display:none;"><li><span id="phoneError"></span></li></span>
                <span id="messageErrorShow" style="display:none;"><li><span id="messageError"></span></li></span>
            </ul>
        </div>
    <div class="">
    <form method="POST" name="contactUsForm" id="contactUsForm">
            <label for="name">Name:</label>
            <input type="text" id="name" name="name" />
            <label for="email">Email:</label>
            <input type="text" id="email" name="email" />
            <label for="phone">Phone:</label>
            <input type="text" id="phone" name="phone" />
            <label for="message">Comments:</label>
            <textarea  id="comments" name="comments"></textarea>
            <button type="submit" name="submitContactForm" id="submitContactForm" value="true" class="btn bt">Submit</button>
            <input type="hidden" name="currentpage" id="currentpage" value="<?=isset($currentpage)?$currentpage:"no page set";?>">
    </form>
    </div>
    </div>
    </div>
    </div> <!--right-section-->
<style type="text/css">
    textarea{
        background: none repeat scroll 0 0 #ecede9;
        border: 1px solid #c9cac6;
        height: 118px;
        padding: 0 2%;
        width: 85%;
        margin-left: 24px;
    }
</style>    

使用Javascript：

<script type="text/javascript">
    function hideContactErrors() {
        document.getElementById("contactFormErrors").style.display = "none";
        document.getElementById("nameErrorShow").style.display = "none";
        document.getElementById("emailErrorShow").style.display = "none";
        document.getElementById("phoneErrorShow").style.display = "none";
        document.getElementById("messageErrorShow").style.display = "none";
    }

    $("#submitContactForm").click(
        function() {
            hideContactErrors();

            var data = {
                "name":$("#name").val(),
                "email":$("#email").val(),
                "phone":$("#phone").val(),
                "comments":$("#comments").val(),
                "currentpage" : $("#currentpage").val()
            };

            data = $(this).serialize() + "&" + $.param(data);

            $.ajax({
                type: "POST",
                dataType: "json",
                url: mailer.php,
                data: data,
                success: function(data) { 
                    if(data["status"] == "success") {
                        $(".successHolder").show();
                        setTimeout(function(){
                        $(".successHolder").hide();
                        },2000)
                        $("#name").val("")
                        $("#email").val("")
                        $("#phone").val("")
                        $("#comments").val("")
                        $("#subject").val("")
                    } else {
                        document.getElementById("contactFormErrors").style.display = "block";

                        /*
                         ********************************
                         * Test each error and display if needed
                         */
                        if(data["name"] != undefined) {
                            document.getElementById("nameErrorShow").style.display = "inline";
                            document.getElementById("nameError").innerHTML = data["name"];
                        }
                        if(data["email"] != undefined) {
                            document.getElementById("emailErrorShow").style.display = "inline";
                            document.getElementById("emailError").innerHTML = data["email"];
                        }
                        if(data["phone"] != undefined) {
                            document.getElementById("phoneErrorShow").style.display = "inline";
                            document.getElementById("phoneError").innerHTML = data["phone"];
                        }
                        if(data["comments"] != undefined) {
                            document.getElementById("messageErrorShow").style.display = "inline";
                            document.getElementById("messageError").innerHTML = data["comments"];
                        }
                    }
                }
            });
            return false;
        }
    );
</script>

php邮件脚本：

<?php 

if(!isset($hasError)) {
        $emailTo = 'xyz@abc.com'; // Put your own email address here
        $body = "Name: $name \n\nEmail: $email \n\nPhone Number: $phone \n\nSubject: $subject \n\nComments:\n $comments \n\nCurrent page: $currentpage";
        $headers = 'From: My Site <'.$emailTo.'>' . "\r\n" . 'Reply-To: ' . $email;

        mail($emailTo, $subject, $body, $headers);
        $emailSent = true;
    }
}
?>  

原始联系表单有效 - 我唯一的区别是用“mailer.php”替换“/ ajax / website / contact / process”的URL。 我尝试在chrome中使用调试控制台，它根据我尝试的时间给出了不同的错误。 它有时会说“$（”＃submitContactForm“）。click（”是一个无法识别的函数。

最好的我可以弄清楚submitContactForm匹配按钮ID，但我不确定它是否正在寻找埋藏在我不再想使用的phpixie框架中包含的堆栈中更深层次的东西。

我已经查看了许多联系表单代码的例子，看起来相当简单 - 我还有其他几个例子可以正常工作。 我需要完成这项工作，而不是重新开始。 弄清楚这将有助于使类似的表单在没有底层框架的情况下工作。

我试图保持这个简单，同时尽可能多地重用代码。 我需要处理其他几种形式，我想找出剥离代码中埋藏的任何框架内容的最佳方法。

Answer 1

• 您要添加两次数据
• <head>外的样式标签
• $ .ajax中没有引用的URL，最终是一个未定义的变量
• 无效的HTML，跨度和LI在一个奇怪的混合中

这是它应该是什么样子

function hideContactErrors() {
    $('#contactFormErrors, #nameErrorShow, #emailErrorShow, #phoneErrorShow, #messageErrorShow').hide();
}

$('#contactUsForm').on('submit', function(e) {
    e.preventDefault();
    hideContactErrors();

    $.ajax({
        url      : 'mailer.php',
        type     : 'POST',
        dataType : 'json',
        data     : $(this).serialize()
    }).done(function(data) {
        if (data.status == "success") {
            $(".successHolder").show().delay(2000).hide(1);
            $("#name, #email, #phone, #comments, #subject").val("")
        } else {
            $("#contactFormErrors").hide();
            $("#nameErrorShow").show().find('span').html(function(_, html) {return data.name||html;});
            $("#emailErrorShow").show().find('span').html(function(_, html) {return data.email||html;});
            $("#phoneErrorShow").show().find('span').html(function(_, html) {return phone.name||html;});
            $("#messageErrorShow").show().find('span').html(function(_, html) {return comments.name||html;});
        }
    });
});

Answer 2

试试这个，

将jquery click事件移动到jQuery onready，

   $(document).ready(function(){
        $("#submitContactForm").click(
            function() {
               // Your code here
            }
        );
   });