title: jQuery AJAX contact form with PHP mailer jumping to mail page
body: <p>I'm making a simple contact form, I have an old school php mailer mail.php and a jQuery front page from where I'm calling it. </p>
  
  <p>As I wanted it to work, it should've stayed on same page, but it actually jumps to mail.php and displays the message
  <code>Thank you for contacting me. I'll try to reach you ASAP.</code>
  Though it does send the mail, thats still not acceptable as that was not my intention. Can anybody find out what I'm doing wrong here ?</p>
  
  <p>Any help appreciated.</p>
  
  <p>PHP:</p>
  
  <pre><code>&lt;?php   
  $name = trim($_POST['name']);
  
  $email = trim($_POST['email']);
  
  if(function_exists('stripslashes')) {
      $message = stripslashes(trim($_POST['message']));
  } else {
      $message = trim($_POST['message']);
  }
  
  $emailTo = 'myEmail@gmail.com';
  $subject = 'Contact Form Submission from '.$name;
  $sendCopy = trim($_POST['sendCopy']);
  $body = "Name: $name \n\nEmail: $email \n\nMessage: $message";
  $headers = 'From: Saddi website &lt;'.$emailTo.'&gt;' . "\r\n" . 'Reply-To: ' . $email;
  
  mail($emailTo, $subject, $body, $headers);
  echo "Thank you for contacting me. I'll try to reach you ASAP.";
  return true;
  ?&gt;
  </code></pre>
  
  <p>FORM (Lot of bootstrap tags there, so to keep it clean I'm just posting ): </p>
  
  <pre><code>    &lt;form class="form" action="mail.php" method="post" id="contact-form"&gt;
  
  
                      &lt;/form&gt;
  </code></pre>
  
  <p>And here goes my AJAX: </p>
  
  <pre><code>    var data_string = jQuery('#contact-form').serialize();
  
      jQuery.ajax({
          type: "POST",
          url: "mail.php",
          data: {name:name,email:email,message:message}, 
          timeout: 6000,
          error: function(request,error) {
              if (error == "timeout") {
                  jQuery('#timedout').fadeIn('slow');
                  setTimeout(function() {
                      jQuery('#timedout').fadeOut('slow');
                  }, 3000);
              }
              else {
                  jQuery('#state').fadeIn('slow');
                  jQuery("#state").html('The following error occured: ' + error + '');
                  setTimeout(function() {
                      jQuery('#state').fadeOut('slow');
                  }, 3000);
              }
          },
          success: function() {
              jQuery('span.valid').remove();
              jQuery('#thanks').fadeIn('slow');
              jQuery('input').val('');
              jQuery('textarea').val('');
              setTimeout(function() {
                  jQuery('#thanks').fadeOut('slow');
              }, 3000);
          }
  </code></pre>