Form submit is not showing success message

Question

I am having a problem with my contact form where there is no success indication being given, even though the message is successfully sent to email. The form appears broken to the user because the page is unchanged when the submit button is pressed. This page was built using a Themeforest template, but the author is unable to provide a solution. I was hoping that someone could point me in the right direction.

Here is the stock 'contact-send.php' file I was given:

<?php


$names = $_POST['names'];
 $email = $_POST['email_address'];
 $comment = $_POST['comment'];
 $to ='to@email.com';

 $message = "";
 $message .= "*Name: " . htmlspecialchars($names, ENT_QUOTES) . "<br>\n";
 $message .= "*Email: " . htmlspecialchars($email, ENT_QUOTES) . "<br>\n";
 $message .= "*Comments: " . htmlspecialchars($comment, ENT_QUOTES) . "<br>\n";
 $lowmsg = strtolower($message);

 $headers = "MIME-Version: 1.0\r\nContent-type: text/html; charset=iso-8859-1\r\n";
 $headers .= "From: \"" . $names . "\" <" . $email . ">\r\n";
 $headers .= "Reply-To: " .  $email . "\r\n";
 $message = utf8_decode($message);  mail($to, "Note from the Contact Form", $message, $headers);

 if ($message){
        echo 'sent';
 }else{
      echo 'failed';
 }
?>

This is the stock html code:

        <form id="contact-form" name="contact-form" action="" method="post">
            <label class="contact-label">Name*</label>
            <input class="contact-input" type="text" name="contact-names" value="" /><br /><span class="name-required"></span>
            <label class="contact-label">Email*</label>
            <input class="contact-input" type="text" name="contact-email" value="" /><br /><span class="email-required"></span>
            <label class="contact-label">Message*</label>
            <textarea name="comments" rows="2" cols="20" class="contact-commnent"></textarea><br /><span class="comment-required"></span>
            <input type="submit" value="Send"  id="submit-form" class="button lightred contact-submit" />
        </form>

This file is attached to the html pages as well: (juery-contact.js)

$(document).ready(function(){
    $('#submit-form').click(function(){

     var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
     var names               = $('#contact-form [name="contact-names"]').val();  
   var email_address = $('#contact-form [name="contact-email"]').val();
   var comment           = $.trim($('#contact-form .contact-commnent').val());
   var data_html ='' ;


                if(names == ""){
                     $('.name-required').html('Your name is required.');
                }else{
                     $('.name-required').html('');
                }
                if(email_address == ""){
                     $('.email-required').html('Your email is required.');
                }else if(reg.test(email_address) == false){
                     $('.email-required').html('Invalid Email Address.');
                }else{
                     $('.email-required').html('');
                }

                if(comment == ""){
                     $('.comment-required').html('Comment is required.');
                }else{
                     $('.comment-required').html('');
                }

        if(comment != "" && names != "" && reg.test(email_address) != false){

            data_html = "names="+ names + "&comment=" + comment + "&email_address="+ email_address;

            //alert(data_html);

          $.ajax({
                  type: 'post',
                  url: 'contact-send.php',
                  data: data_html,
                  success: function(msg){
                    if (msg == 'sent'){
                            $('#success').html('Message sent!')     ;
                            $('#contact-form [name="contact-names"]').val('');   
                          $('#contact-form [name="contact-email"]').val('');
                        $('#contact-form .contact-commnent').val('');

                        }else{
                            $('#success').html('Mail Error. Please Try Again.!')    ;   
                        }
                  }
            });

      }

        return false;
    })
})

Here is the live site if you need it: http://shamrockmasonry.ca/contact.html

Any help would be appreciated!

Answer 1

I glanced at the source code and noticed that there isn't an element with '#success' id.

So this block of code that adds html message to #success element can't do that because that element does not actually exist:

 if (msg == 'sent'){
     $('#success').html('Message sent!');
     $('#contact-form [name="contact-names"]').val('');   
     $('#contact-form [name="contact-email"]').val('');
     $('#contact-form .contact-commnent').val('');
 }else{
     $('#success').html('Mail Error. Please Try Again.!')    ;   
 }

To answer your additional question you made in the comments about removing the error messages you got after successful submit do the following.

Add additional class to your span's, like in example here

<span class="email-required error-message"></span>
<span class="name-required error-message"></span>
<span class="comment-required error-message"></span>

And add this line of code to your jquery block:

if (msg == 'sent'){
     $('#success').html('Message sent!');
     $('#contact-form [name="contact-names"]').val('');   
     $('#contact-form [name="contact-email"]').val('');
     $('#contact-form .contact-commnent').val('');
     $('.error-message').empty(); // clears all of the current error messages on success
 }else{
     $('#success').html('Mail Error. Please Try Again.!')    ;   
 }

So add a div element with #success id above your form tag and you should be good.

Hope it helps.

Answer 2

Add <div id="success"></div> before form HTML

Should be:

<div id="success"></div>
<form id="contact-form" name="contact-form" action="" method="post">
    [...]
</form>