Ajax not posting data to PHP in JSON object

Question

i have tried multiple ways using different ajax methods and cant get this to work. I am new to ajax and json so i thought this may be cause the data is not in a form but i have other ajax process's structured the same and they work. the inputs are picked up on click and appears in console but it seems the data: isnt sending the variables to php because when it fails the data returns undefined in alert box. the sql query etc runs fine in php myadmin so im at the end and lost haha! hoping someone can help me!! thanks in advanced!

HTML

<?php 
    $page = "Blog | Fakebook"; 
    include "../inc/connect.php"; 
    include "../inc/login-check.php"; 
    include "../inc/header.php";
    include "../inc/menus.php";


?>
<div id="content-wrap" class="create-a-blog">
    <?php
        include "../inc/modals.php"; 
        echo "<input type='hidden' name='author' value='" . $_SESSION['userID'] . "' />"
    ?>
    <div id="hero">
        <a id="ajax-blog-bg" class="btn btn-hollow-wht add-img">Add Image</a>
        <a id="ajax-publish-blog" class="btn btn-hollow-wht pub-blg">Publish Blog</a>
        <section class='create-blog-title'>
            <textarea id="edit-blog-title" name="blog-title" class="title-input" >Enter Blog Title</textarea>
<!--            <p>Date and your name will be shown here</p>-->
        </section>
    </div>  
    <div id="create-blog-content">
        <div class="container rel">
            <article class="article">
                <textarea id="edit-blog-content" rows='4' name='blog-content' cols='50' >Go ahead and get your blog started</textarea>
            </article>
        </div>
    </div>
</div>

AJAX

$("#ajax-publish-blog").click(function (e){
        event.preventDefault();
        var blogTitle = $('#edit-blog-title').val();
        var content = $('#edit-blog-content').val();
        var image = $('.create-a-blog #hero').css('background-image');
        var cleanup = /\"|\'|\)/g;
        var bg = image.split('/').pop().replace(cleanup, '');
        var authorID = $('input[name=author]').val();
        console.log("Blog Title = " + blogTitle + " // Blog Content = " + content + " // bg image = " + bg + " // authorID =" + authorID);

        $.ajax({
            url: "../process/post-blog-process2.php",
            type: "POST",
            data: { blogTitle: blogTitle, content: content, image: bg, authorID: authorID },
            dataType: 'json',
            success: function(data){
                alert("ohyer" + " " + data.title + " " + data.authorID + " " + data.content + " " + data.image) 
            },
            error: function(data) {
                alert("ohno" + " " + data.title + " " + data.authorID + " " + data.content + " " + data.image)
            }
        });
    });

PHP

<?php
    session_start(); //start a session  
    include "../inc/connect.php"; //include the database connection 

    //prevent SQL injection and get data from inputs
    $blogTitle = mysqli_real_escape_string($con, $_POST['blogTitle']);
    $image = mysqli_real_escape_string($con, $_POST['image']); 
    $content = mysqli_real_escape_string($con, $_POST['content']); 
    $authorID = mysqli_real_escape_string($con, $_POST['author']);


    $sql="INSERT INTO blog (blogTitle, image, content, date, authorID) VALUES ('$blogTitle', '$image', '$content', NOW(), '$authorID')";
    $result = mysqli_query($con, $sql) or die(mysqli_error($con)); //run the query 

    if (!$result) {
        $data['success'] = false;
        $data['title'] = $blogTitle;
        $data['authorID'] = $authorID;
        $data['content'] = $content;
        $data['image'] = $image;
    } else {
        $data['success'] = true;
        $data['redirect'] = '../pages/blog.php';
    }

    echo json_encode($data);
?>

Answer 1

The preventDefault function is a variable that does not exist (event) use only "e" there. In the "data" variable names, use double quotes. Do not use: data: {variable: variable} use: data: {variable: value}. Ie, variable and value with different names.

$("#ajax-publish-blog").click(function (e){
    e.preventDefault();
    var titleBlog = $('#edit-blog-title').val();
    var contenido = $('#edit-blog-content').val();
    var image = $('.create-a-blog #hero').css('background-image');
    var cleanup = /\"|\'|\)/g;
    var bg = image.split('/').pop().replace(cleanup, '');
    var IDauthor = $('input[name=author]').val();
    console.log("Blog Title = " + titleBlog + " // Blog Content = " + contentido + " // bg image = " + bg + " // authorID =" + IDauthor);

    $.ajax({
        url: "../process/post-blog-process2.php",
        type: "POST",
        data: { 'blogTitle': titleBlog, 'content': contenido, 'image': bg, 'authorID': IDauthor },
        dataType: 'json',
        success: function(data){
            alert("ohyer" + " " + data.titleBlog + " " + data.IDauthor + " " + data.contenido + " " + data.image) 
        },
        error: function(data) {
            alert("ohno" + " " + data.titleBlog + " " + data.IDauthor + " " + data.contenido + " " + data.image)
        }
    });
});