Ajax Contact Form not showing Success

Question

when I hit the send button on my contact form the form itself just disappears, not showing any kind of success message even though the email does still come threw. Below is the php, javascript and html. Thanks in advance for the help.

<!--[if lte IE 8]>
<script src="js/html5shiv.js"></script><![endif]-->

<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.dropotron.js"></script>
<script src="js/skel.min.js"></script>
<script src="js/skel-panels.min.js"></script>
<script src="js/init.js"></script>
<script src="js/contact.js"></script>
<noscript>
    <link rel="stylesheet" href="css/skel-noscript.css" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" href="css/style-noscript.css" />
</noscript>


          <!-- Contact Form-->
          <div class="content style4 featured">
       <div class="container small">
       <form id="contact" form method="post">

        <div class="row half">
         <div class="6u"><input type="text" class="text" name="name" id ="name" placeholder="Name" /></div>
           <div class="6u"><input type="text" class="text" placeholder="Email" name="email" id="email"/></div>
      </div>

<div class="row half">
    <div class="12u"><textarea name="text" placeholder="Message" id="message"></textarea></div>
</div>

<div class="row">
    <div class="12u">
        <ul class="actions">
            <li><input type="submit" class="button" value="Send Message" /></li>
            <li><input type="reset" class="button alt" value="Clear Form" /></li>
   <p class="success" style="display:none">Your message has been sent successfully.</p>
            <p class="error" style="display:none">E-mail must be valid and message must   be longer than 100 characters.</p>
        </ul>
    </div>

</div>

</form>

PHP:

<?php
    // Email Submit
    // Note: filter_var() requires PHP >= 5.2.0
    if ( isset($_POST['email']) && isset($_POST['name']) && isset($_POST['message']) &&      filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {
        // detect & prevent header injections
        $test = "/(content-type|bcc:|cc:|to:)/i";
        foreach ( $_POST as $key => $val ) {
            if (preg_match( $test, $val ))
            exit;
        }

        //send email
        mail( "test@gmail.com", "Contact Form: ".$_POST['name'], $_POST['message'], "From:" .      $_POST['email'] );
    }
?>

JS:

$('#contact').submit(function(e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
//var dataString = 'name=' + name + '&email=' + email + '&message=' + message;

$.ajax({
    type : "POST",
    url : "mail.php",
    data : {name:name,email:email,message:message},
    cache : false,
    success : function() {              
        $("#contact").fadeOut(300);
        $("#notice").fadeIn(400);
    }
});
return false;
});

Answer 1

It disappears because you told it to with this code

$("#contact").fadeOut(300);

But I don't see your #notice container anywhere. It should be somewhere outside the #contact container and hidden by default.

Add something like this bellow your contact form:

<div id="notice" style="display:none">Email sent successfully</div>

But in order for it to be correct you should check in php if it is sent and then return something like "OK" like this:

if(mail(...)){
    echo "OK";
}

and then in your response in javascript catch that message to see if it is really sent, like this

success : function(message) {
      if(message=="OK"){
      //then hide and show success
      }
}