.ajax and .click don't want to work for me on a simple contact form

Question

I am in the process of stripping out some html/css from a webstie that was built badly with a framework. This contact form works on the site that uses the framework but when I cut and paste it into its' own set of files, I get no response when I click the submit button. The file has several includes for a header, footer and right side contact form. The header.php file has a lot of unrelated code and the important links to several JS and CSS libraries:

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

The main content section of the page has some static content and the include for the contact form. The contact form is:

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

The php mailer script:

<?php 

if(!isset($hasError)) {
        $emailTo = '[email protected]'; // 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;
    }
}
?>  

The original contact form works - the only difference I have made is to replace the URL that was "/ajax/website/contact/process", with "mailer.php". I have tried using the the debug console in chrome and it gives me different errors depending on when I try it. It sometimes says the "$("#submitContactForm").click( " is an unrecognized function.

As best I can figure out the submitContactForm matches the button id but I'm unsure if it is looking for something buried deeper in the stack that was included with the phpixie framework that I no longer want to use.

I have looked at many examples of contact form code and it seems fairly straight forward - I have gotten several other examples to work fine. I need to make this work pretty much as written instead of starting over. Figuring this out will help to make similar forms work without the underlying framework.

I am trying to keep this simple while reusing as much of the code as possible. There are several other forms that I need to work on and I would like to figure out the best way of stripping out whatever framework stuff is burried in the code.

Answer 1

• You're adding the data twice
• Style tags outside the <head>
• URL in $.ajax not quoted, ends up being an undefined variable
• Invalid HTML,spans and LI's in a strange mix

Here's what it should look like

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