Inserting data into a mysql table using ajax without page refresh

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:

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 + "&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();
     }      
}

And here's my PHP

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 && $senderEmail && $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' )";

    开发者_StackOverflow社区if(!mysql_query($sql,$con)) {
        $success = "error"; 
    } else {
        $recipient = RECIPIENT_NAME . " <" . RECIPIENT_EMAIL . ">";
        $headers = "From: " . $senderName . " <" . $senderEmail . ">";
        $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.

Try editing the type and async parts of your jquery ajax like this:

var answer = $.ajax( {
    url: "processContact.php?ajax=true",
    type: "post",
    data: contactForm.serialize(),
    async: true,
    success: submitFinished
 } );

Are you running firebug?