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

Question

我正在从一个用框架构建得很糟糕的网站中删除一些 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;
    }
}
?>  

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

尽我所能找出 submitContactForm 与按钮 ID 相匹配，但我不确定它是否正在寻找隐藏在堆栈中更深的东西，这些东西包含在我不想再使用的 phpixie 框架中。

我看过很多联系表单代码的例子，它看起来相当简单——我有几个其他的例子可以正常工作。我需要使这项工作与编写的差不多，而不是重新开始。弄清楚这一点将有助于使类似的表单在没有底层框架的情况下也能工作。

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

Answer 1

• 您要添加两次数据
• <head> 之外的样式标签
• $.ajax 中的 URL 没有被引用，最终成为一个 undefined variable
• 无效的 HTML、spans 和 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;});
        }
    });
});