Question

I have the following JQuery to submit a contact form with jquery ajax. This is the first time I attempted to use ajax and I don’t seem to be able to make it work.

When I submit the form, I get a full page refresh and then taken to the forms action page which is a php file that processes the form. I can’t figure out why. Can you help?

The php file processes the info properly because he message I get at the end is correct — it just gives it to me on the php page.

Thank you!

$(document).ready(function() {

    ...

    // -----------------------------------------------
    // EMAIL FORM SUBMIT CLICK
    // -----------------------------------------------
    $("#contact_form #btnSubmit").click(function() {

        // assign form elements to variables
        var txbName = $("input[name=txbName]");
        var txbEmail = $("input[name=txbEmail]");
        var txbMessage = $("textarea[name=txbMessage]");
        var txbRecaptcha = $("input[id=recaptcha_response_field]");

        // assign form element values
        var txbNameVal = txbName.val();
        var txbEmailVal = txbEmail.val();
        var txbMessageVal = txbMessage.val();
        var txbRecaptchaVal = txbRecaptcha.val();

        // validate NAME field
        if($.trim(txbNameVal) == "" || $.trim(txbNameVal.length) < 2){
            $(txbName).focus().fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");
            response('- Name is required!','show');
            return false;
        } else {
            response('','hide');
        }

        // validate EMAIL field
        if($.trim(txbEmailVal) == "" || $.trim(txbEmailVal.length) < 6){
            $(txbEmail).focus().fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");
            response('- Email is required!','show');
            return false;
        } else {
            response('','hide');
        }

        // validate EMAIL format
        if(!txbEmailVal.match(/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/)){
            $(txbEmail).focus().fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");
            response('- Email format is incorrect!','show');
            return false;
        } else {
            response('','hide');
        }

        // validate MESSAGE field
        if($.trim(txbMessageVal) == "" || $.trim(txbMessageVal.length) < 10){
            response('- Message is required!','show');
            $(txbMessage).focus().fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");
            return false;
        } else {
            response('','hide');
        }

        // validate reCAPTCHA field
        if($.trim(txbRecaptchaVal) == ""){
            response('- Recaptcha is required!','show');
            $(txbRecaptcha).focus().fadeOut("slow").fadeIn("slow").fadeOut("slow").fadeIn("slow");
            return false;
        } else {
            response('','hide');
        }

        /*
        if we've passed all of the above validation,
        then show the ajax loading icon, serialize
        the form data and call the ajax submit function
        */
        $('.loading').show();
        var formData = $('form').serialize();
        submitForm(formData);
    });
});

// -----------------------------------------------
// AJAX FORM SUBMIT - OUTSIDE OF DOCUMENT READY!
// -----------------------------------------------
function submitForm(formData){
    $.ajax({    
        type: 'POST',
        url: 'contact.php',     
        data: formData,
        dataType: 'json',
        cache: false,
        timeout: 7000,
        success: function(data) {           
            // test
            alert(data.msg);
        },
        error: function(XMLHttpRequest, textStatus, errorThrown) {
            // test
            alert(errorThrown + textStatus);            
        },              
        complete: function(XMLHttpRequest, status) {            
            $('form')[0].reset();
        }
    }); 
}

Answer 1

You need to return false after calling submitForm to prevent the browser from performing the default action (submitting the page with a refresh).

By the way, rather than this:

$("#contact_form #btnSubmit").click(function() {
    // ...
});

I would use this:

$("#contact_form").submit(function() {
    // ...
});

Then if the user presses enter in a field or otherwise submits the form without clicking the button, your code will handle that, too.