0

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="me@email.com"
            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}
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);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.