Bad Request when creating new post in Wordpress

Question

I am trying to insert a new post with a simple ajax form in a wordpress plugin. Visitors will use this form to create posts from frontend.

My form is like this:

<script>
jQuery( document ).ready(function() {
    jQuery('input[type=submit]').on('click', function() {
        var ajaxurl = 'https://example.com/wp-admin/admin-ajax.php';
        jQuery.ajax({
            type: "POST",
            data: jQuery('.event-form').serialize(),
            url: ajaxurl,
            success: function(result) {
                console.log('data sent!');
                console.log('sent to: ' + templateDir + loadUrl );
            },
            error: function(jqXHR, textStatus, errorThrown) {
                console.log(jqXHR + " :: " + textStatus + " :: " + errorThrown);
            }
        });
    });
});
</script>

<form id="msform" name="review_form" class="form-horizontal event-form" action="/create-event" method="POST" enctype="multipart/form-data">
        <input type="text" name="title" placeholder="title">
        <textarea rows="4" name="desc" placeholder="Description"></textarea>
        <select name="category">
          <option value="volvo">Volvo</option>
          <option value="saab">Saab</option>
          <option value="opel">Opel</option>
          <option value="audi">Audi</option>
        </select>
        <input type="hidden" name="userID" id="userID" value="<?php get_current_user_id(); ?>">
        <input type="submit" name="submit" class="submit action-button" value="Submit"/>
</form>

This is the php ajax function

function save_post () {

    $new_post = array(
                'post_title'    => $_POST['title'],
                'post_author'   => $_POST['userID'],
                'post_content'  => $_POST['desc'],
                'post_category' => array($_POST['category']),
                'post_status'   => 'publish',           
                'post_type' => 'post'  
        );

    $post_id = wp_insert_post($new_post);
}
add_action('wp_ajax_nopriv_save_post','save_post');
add_action('wp_ajax_save_post','save_post');

I am getting the following error message in the console when I click the submit button:

[object Object] :: error :: Bad Request

What am I doing wrong?

Answer 1

Try this code. action: 'save_post' is missing in ajax script

function save_post () {

    $params = array();
    parse_str($_POST['data'], $params);

    $new_post = array(
                'post_title'    => $params['title'],
                'post_author'   => $params['userID'],
                'post_content'  => $params['desc'],
                'post_category' => array($params['category']),
                'post_status'   => 'publish',           
                'post_type' => 'post'  
        );

    $post_id = wp_insert_post($new_post);
    die($post_id);
}
add_action('wp_ajax_nopriv_save_post','save_post');
add_action('wp_ajax_save_post','save_post');


    <script>
    jQuery( document ).ready(function() {
        jQuery('input[type=button]').on('click', function() {
            var ajaxurl = "<?php echo admin_url('admin-ajax.php'); ?>";
            jQuery.ajax({
                type: "POST",
                data: {
                    data:jQuery('.event-form').serialize(),
                    action: 'save_post'
                },
                url: ajaxurl,
                success: function(result) {
                    console.log('data sent!');
                    console.log('sent to: ' + templateDir + loadUrl );
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.log(jqXHR + " :: " + textStatus + " :: " + errorThrown);
                }
            });
        });
    });
    </script>

    <form id="msform" name="review_form" class="form-horizontal event-form" method="POST" enctype="multipart/form-data">
            <p><input type="text" name="title" placeholder="title" value="test"></p>
            <textarea rows="4" name="desc" placeholder="Description"></textarea>
            <select name="category">
              <option value="volvo">Volvo</option>
              <option value="saab">Saab</option>
              <option value="opel">Opel</option>
              <option value="audi">Audi</option>
            </select>
            <input type="hidden" name="userID" id="userID" value="<?php echo get_current_user_id(); ?>">
            <input type="button" name="submit" class="submit action-button" value="Submit"/>
    </form>