Insert Post using Ajax

by

I’m using the following code to submit a form from a WordPress page.

<script type="text/javascript">
$j=jQuery.noConflict(); 
    $j(document).ready(function(){                                              
        $j("#enqform").validate({               
            submitHandler: function () {                 
                dataString = $j("#enqform").serialize();                                
                $.ajax({
                    type: "POST",
                    url: "http://www.mysite.co.uk/wp-content/themes/mytheme/lib/form-process.php",
                    data: dataString,
                    error: function(jqXHR, textStatus, errorThrown){                                        
                        console.error("The following error occured: " + textStatus, errorThrown);                                                       
                    },
                    success: function(data) {                                       
                        console.log("Hooray, it worked!");                                                                  
                    }                              
                });                             
            }                   
        })
    }); 
</script>                    

<form action="<?php the_permalink(); ?>" class="contact-box" id="enqform" method="post">
    <label for="firstname">First Name<span class="req">*</span></label>                      
    <input type="text" id="firstname" name="firstname" value="<?php if(isset($_POST['firstname'])) echo $_POST['firstname'];?>" class="required" /> 
    <input type="submit" id="submit-btn" value="Submit" />
    <input type="hidden" name="submitted" id="submitted" value="true" /> 
    <input type="hidden" name="nonce" value="<?php echo wp_create_nonce( 'form-nonce' );?>" />                      
</form>

This is the code in the form-process.php file:

<?php       
if(isset($_POST['submitted'])) {    

    if(trim($_POST['firstname']) === '') {
        $hasError = true;
    } else {
        $firstname = trim($_POST['firstname']);
    }   

    global $wpdb;
    $nonce = $_POST['nonce'];
    if ( ! wp_verify_nonce( $nonce, 'form-nonce' ) ) {
        die( 'Security check' ); 
    } else {            
        $new_post = array(
            'post_title'    => $firstname,
            'post_status'   => 'publish',
            'post_type' => 'mycpt'
        );
        $pid = wp_insert_post($new_post);                           
        if( $pid ) { 
            add_post_meta( $pid, 'cpt_firstname', $firstname, true );                                       
        }
    }
}           
?>

The form works ok but seems to die when it gets to wp_insert_post, resulting in a 500 Internal Server Error.

Any ideas where I’m going wrong please?

1 Answer
1

What says the error log? Is that the complete content of form-process.php? When it is so, then the problem might be, that the function wp_insert_post() is not defined, because the WordPress core was not loaded.

Therefore WordPress has an AJAX-API. Here’s an example on how to use that API on server side:

add_action( 'admin_ajax_your_form_action', 'wpse_126886_ajax_handler' );

function wpse_126886_ajax_handler() {

    // maybe check some permissions here, depending on your app
    if ( ! current_user_can( 'edit_posts' ) )
        exit;

    $post_data = array();
    //handle your form data here by accessing $_POST

    $new_post_ID = wp_insert_post( $post_data );

    // send some information back to the javascipt handler
    $response = array(
        'status' => '200',
        'message' => 'OK',
        'new_post_ID' => $new_post_ID
    );

    // normally, the script expects a json respone
    header( 'Content-Type: application/json; charset=utf-8' );
    echo json_encode( $response );

    exit; // important
}

The your_form_action slug is the »trigger« of your callback. You have to append this slug to your request parameter named action. To keep up with the .serialize() I suggest to pass this slug as a hidden input in your formular:

<input type="hidden" name="action" value="your_form_slug" />

Finally, you have to use the wp-admin/admin-ajax.php URL for your AJAX request:

$.ajax({
    type: "POST",
    url: "http://www.mysite.co.uk/wp-admin/admin-ajax.php",
    data: dataString,
    error: function(jqXHR, textStatus, errorThrown){                                        
        console.error("The following error occured: " + textStatus, errorThrown);                                                       
    },
    success: function(data) {                                       
        console.log("Hooray, it worked!");                                                                  
    }                              
});

Leave a Comment