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