1

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?

3

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!");                                                                  
    }                              
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.