javascript - Bad Request when adding new post via ajax form

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 = '.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 () {
    ini_set('display_errors', 1); 
    error_reporting('E_ALL');

    $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?

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/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 () {
    ini_set('display_errors', 1); 
    error_reporting('E_ALL');

    $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?

• ajax
• javascript
• forms

Share Improve this question asked Feb 11, 2019 at 4:38 GeorgePGeorgeP 35711 silver badge1010 bronze badges

Add a comment  | 

2 Answers 2

Sorted by: Reset to default 0

Finally found the problem. The action: save_post was missing from data in ajax call. This code works:

  <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>

Your form calls action 'create-event', your ajax function is 'save_post'. Tell your ajax script which action (method/function) to use. I think it never reaches 'save_post'.