Ajax form reloading page instead of working in the background

Question

Firstly, based on other suggestions, I've tried moving around the preventDefault() but haven't had success.

My feedback form uses this JavaScript to pass form fields to "process.php" and return with the relevant messages (ie: "sucesss" or "fail")

It's doing its job except that instead of staying on the same page 'feedback.php' it loads 'process.php' page with this ... {"Data":"Data Value"}

Heres the code:

$(document).ready(
function(){
    $('form').submit(
        function(event){
            var formData =
            {
                'name' : $('input[name=name]').val(),
                'page' : $('input[name=page]').val()
            };

            $('.form-group').removeClass('has-error'); // remove the error class
            $('.error').remove(); // remove the error text

            event.preventDefault();

            $.ajax({
                    type     : 'POST', // define the type of HTTP verb we want to use (POST for our form)
                    url      : 'process.php', // the url where we want to POST
                    data     : formData, // our data object
                    dataType : 'json', // what type of data do we expect back from the server
                    encode   : true
                })

            .done(function(data){
                    if ( ! data.success)
                    {
                        if (data.errors.name)
                        {
                            $('#name-group').addClass('has-error'); // add the error class to show red input
                            $('#nameField').append(data.errors.name); // add the actual error name under our input
                        }
                    }
                    else 
                    {
                        $('form').append('<div class="buttonError">Message Sent!</div>');
                        form.myButton.disabled = true;
                    }
                }
            );

            .fail(function(data){
                    $('form').append('<div class="buttonError">Failed!</div>');
                }
                console.log(data);
            );
            event.preventDefault();
        }
    );
});

Answer 1

looks like syntax error calling $.ajax, it should be corrected like this:

    $.ajax({
        type     : 'POST', // define the type of HTTP verb we want to use (POST for our form)
        url      : 'process.php', // the url where we want to POST
        data     : formData, // our data object
        dataType : 'json', // what type of data do we expect back from the server
        encode   : true
    }).done(function(data){
        if ( ! data.success)
        {
            if (data.errors.name)
            {
                $('#name-group').addClass('has-error'); // add the error class to show red input
                $('#nameField').append(data.errors.name); // add the actual error name under our input
            }
        }
        else 
        {
            $('form').append('<div class="buttonError">Message Sent!</div>');
            form.myButton.disabled = true;
        }
    }).fail(function(data){
        $('form').append('<div class="buttonError">Failed!</div>');
        console.log(data);
    });

Answer 2

Remove the method and action in the form tag in your HTML file. This looks fine. Let me know if it doesn't work.