Jquery Freeform AJAX submission form error

Question

I have created a basic submission form using expression engine's plugin free form. From the CMS side of things my data is being submitted into the EE CMS. However after i have submitted my details, rather than receiving a success message i receive the following message on my form object object. <div id="form-messages" class="success">[object Object]</div>

I am assuming this has something to do with my jquery As the function was working when i was validating the submission through php.

Below is a snippet of my code.

var form = $('#ajax-contact');
var formMessages = $('#form-messages');

$(form).submit(function(e) {

e.preventDefault();
var formData = $(form).serialize();

// Submit the form using AJAX.
$.ajax({
    type: 'POST',
    url: $(form).attr('action'),
    data: formData
})
.done(function(response) {
    //  formMessages div has the 'success' class.
    $(formMessages).removeClass('error');
    $(formMessages).addClass('success');

    // Set the message text.
    $(formMessages).text(response);

    // Clear the form.
    $('#name').val('');
    $('#email').val('');
})
.fail(function(data) {
    // Make sure that the formMessages div has the 'error' class.
    $(formMessages).removeClass('success');
    $(formMessages).addClass('error');

    // Set the message text.
    if (data.responseText !== '') {
        $(formMessages).text(data.responseText);
    } else {
        $(formMessages).text('Oops! An error occured and your message could not be sent.');
    }
});

})

HTML

exp:freeform:form 
            form_id="1"
            admin_notify="[email protected]"
            form:class="main-contact submit-fade ajax-form"
            form:id="ajax-contact"


        }

            <ul class="small-block-grid-2 medium-block-grid-2 hide-form">
               <li>
                  <label for="name">Name</label>
                  {freeform:field:first_name
                      attr:class="form-control" 
                      attr:placeholder="First Name" 
                      attr:class="required"
                  }

                </li>

                <li>
                  <label for="email">Email</label>
                  {freeform:field:email
                      attr:class="form-control" 
                      attr:placeholder="Email" 
                      attr:class="required"
                  }
                 </li>
              </ul>
              <input type="submit" class="btn btn-success">

        {/exp:freeform:form}

Answer 1

By default, Freeform auto-detects if you are using AJAX for the form submission. AJAX requests will return errors and success mesages in JSON. If you wish to disable this, specify a value of no.

That's a JSON object you're getting back, buddy. Can't just dump it, you have to parse it somehow. Start by replacing this line

$(formMessages).text(response);

with this line:

console.log(response);

and open your developer console after a test submission. Then investigate the JSON object and figure out what you're looking to dump. It's probably something like this:

$(formMessages).text(response.msg);
// or
$(formMessages).text(response.error);
//// or 
$(formMessages).text(response.im_a_json_object);