Template for submit via ajax to Guest Entries plugin

Question

I am a bit mystified by how to utilize templates for Guest entries plugin working fine for normal post saving custom fields.

When I use ajax to submit I get an XHR 200 response but an HTML response - no JSON. Ideally I don't want to redirect to another page but just manipulate the DOM and pass some variables into the page form JSON returned on success.

I have read and reread every ajax post but still can't get a pure JSON response

Is it necessary to utilize some kind of detection within the template for Craft ajax?

Just when I thought i had ajax understood...

Here is my JS:

$(document).ready(function () {
//validation rules
$("form#brick").validate({
    ignore: ":hidden",
    rules: {
        "fields[firstName]": {
            required: true,
        },
        "fields[lastName]": {
            required: true
        },
        "fields[email]": {
            required: true,
            email: true
        }
    },
    messages: {
        "fields[email]": "Email is required"
    },

    submitHandler: function (form) {
        // Prevent default posting of form
        event.preventDefault();

        var data = $(this).serialize();

        $.ajax('/', data, function(response) {
            if (response.success) {

                console.log(response);
                $('#thanks').fadeIn();
                $('#brick').fadeOut();
                console.log(response);
            } else {
                // response.error will be an object containing any validation errors that occurred, indexed by field name
                // e.g. response.error.fromName => ['From Name is required']
                alert('An error occurred. Please try again.');
            }
        });
    }
});

});

Answer 1

There are some problems with your JavaScript that I expect is the cause of your issue.

From your code I'm assuming you're using jQuery Validate to validate the form before submission. Your first issue is the line

event.preventDefault();

within the submitHandler() method – jQuery Validate will actually prevent the default form submission for you, so this line is redundant. Also, there is no variable called event, so that's going to cause trouble.

The second issue is that you're using the wrong syntax for the $.ajax() method. Considering your current code, I believe you want to use the $.post() method instead.

Finally, you're serializing the wrong object – $(this).serialize() should actually read $(form).serialize().

With the above issues fixed, your code should look like this:

$(document).ready(function () {

    $('form#brick').validate({

        ignore: ":hidden",

        rules: {
            "fields[firstName]": {
                required: true,
            },
            "fields[lastName]": {
                required: true
            },
            "fields[email]": {
                required: true,
                email: true
            }
        },

        messages: {
            "fields[email]": "Email is required"
        },

        submitHandler: function (form) {

            var data = $(form).serialize();

            $.post('/', data, function (response) {
                if (response && response.success) {
                    $('#thanks').fadeIn();
                    $('#brick').fadeOut();
                } else {
                    alert('An error occurred. Please try again.');
                }
            });

        }

    });

});

Finally, for some pointers on how you could handle errors within the response payload, see this thread.