title: Inserting data into a mysql table using ajax without page refresh
body: <p>I have a basic contact form that uses recaptcha and it kinda works. I have field validation, captcha validation, and it's posting to my db but my page refreshes after the INSERT. Here's my JS:</p>
  
  <pre><code>function validateCaptcha()
  {
      challengeField = $("input#recaptcha_challenge_field").val();
      responseField = $("input#recaptcha_response_field").val();
  
      var html = $.ajax({
          type: "POST",
          url: "ajax.recaptcha.php",
          data: "recaptcha_challenge_field=" + challengeField + "&amp;recaptcha_response_field=" + responseField,
          async: false
      }).responseText;
  
      if(html == "success") {
           processForm();
      } else {
          $('#wrongCaptcha').fadeIn().delay('5000').fadeOut();
          return false;
      }
  }
  
  function processForm(){
      var contactForm = $('#contactUsForm');
      if ( !$('#senderName').val() || !$('#senderEmail').val() || !$('#senderComments').val() ) {
          ('#incompleteMessage').fadeIn().delay('5000').fadeOut();
      } else {
          var answer = $.ajax( {
                url: "processContact.php?ajax=true",
                type: contactForm.attr( 'method' ),
                data: contactForm.serialize(),
                async: false,
                success: submitFinished
              } );
      }
  }
  
  function submitFinished( response ) {
      response = $.trim( response );
      if ( response == "success" ) {
          //$('#successMessage').fadeIn().delay('2000').fadeOut();
          $('#senderName, #senderEmail, #senderComments').val( "" );
          return false;
       } else {
          alert('errororoer');
          //$('#failureMessage').fadeIn().delay('5000').fadeOut();
       }      
  }
  </code></pre>
  
  <p>And here's my PHP</p>
  
  <pre><code>define( "RECIPIENT_NAME", "Chris Tate" );
  define( "RECIPIENT_EMAIL", "chris@nimmbl.com" );
  define( "EMAIL_SUBJECT", "Visitor Message" );
  
  // Read the form values
  $success = false;
  
  $senderName = isset( $_POST['senderName'] ) ? preg_replace( "/[^\.\-\' a-zA-Z0-9]/", "", $_POST['senderName'] ) : "";
  $senderEmail = isset( $_POST['senderEmail'] ) ? preg_replace( "/[^\.\-\_\@a-zA-Z0-9]/", "", $_POST['senderEmail'] ) : "";
  $senderComments = isset( $_POST['senderComments'] ) ? preg_replace( "/(From:|To:|BCC:|CC:|Subject:|Content-Type:)/", "", $_POST['senderComments'] ) : "";
  
  // If all values exist, send the email
  if ( $senderName &amp;&amp; $senderEmail &amp;&amp; $senderComments ) {
  
      $senderName = mysql_real_escape_string($senderName);
      $senderEmail = mysql_real_escape_string($senderEmail);
      $senderComments = mysql_real_escape_string($senderComments);
  
      $con = mysql_connect('localhost', 'root', 'root');
  
      if(!$con) { $success = "error"; }
  
      mysql_select_db('mf_db', $con);
      $sql="INSERT INTO emailData ( senderName, senderEmail, senderComments) VALUES ( '$senderName', '$senderEmail', '$senderComments' )";
  
      if(!mysql_query($sql,$con)) {
          $success = "error"; 
      } else {
          $recipient = RECIPIENT_NAME . " &lt;" . RECIPIENT_EMAIL . "&gt;";
          $headers = "From: " . $senderName . " &lt;" . $senderEmail . "&gt;";
          $success = mail( $recipient, EMAIL_SUBJECT, $senderComments, $headers );
      }
  
      mysql_close($con);
  }
  
  
  if ( isset($_GET["ajax"]) ) {
    echo $success ? "success" : "error";
  } else { ... I cut the rest off b/c it's just some html.
  </code></pre>