使用带有Ajax的前端表单/输入框更新帖子元，而无需重新加载页面

Question

I'm able to update post meta without ajax, with page reload using below code.

global $post;
if( isset($_POST['submit_meta']) ) {
    if( ! empty($_POST['change_meta']) ) {
       update_post_meta($post->ID, 'shorturl', $_POST['change_meta']);
    }
}
echo $_POST[ 'change_meta' ];


<form method="post" action="" id="shortform">
<input style="/*display:none;*/" id="shortUrlInfo2" type="text" name="change_meta" value="<?php echo get_post_meta( get_the_ID(), 'shorturl', true ); ?>">
<input id="btn_url" type="submit" name="submit_meta" value="Confirm" />
</form>

But how can i update the same post meta ( custom field ) with ajax? I tried my best to get it right using various sources, but can't able to find a solution.

I even tried wordpress ajax in plugins, but can't able to understand really.

Here is the thing, i've tried.

add_action( 'wp_ajax_update_custom_fields', 'update_custom_fields' );
add_action( 'wp_ajax_nopriv_update_custom_fields', 'update_custom_fields' );

function update_custom_fields() {
    $post_id = $_POST[ 'post_id' ];
    $meta1 = $_POST[ 'meta1' ];
    $meta2 = $_POST[ 'meta2' ];

    update_post_meta( $post_id, 'meta1', $meta1 );
    update_post_meta( $post_id, 'meta2', $meta2 );

    die('Updated');
}

add_action('wp_footer', 'pp_script');

function pp_script() {
    wp_enqueue_script('jquery');
?>

<script>
jQuery(document).ready( function($) {
    var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
    var spinner = '<?php echo admin_url( 'images/spin.gif' ); ?>';
    $('.pp input').click( function() {
        var p = $(this).parent('p');
        p.find('.response').html('<img src="'+spinner+'" />');
        $.post(ajaxurl, {
            'action': 'update_custom_fields',
            'post_id': p.find('input[name="post_id"]').val(),
            'meta1': p.find('input[name="meta1"]').val(),
            'meta2': p.find('input[name="meta2"]').val()
        }, function( response ) {

            p.find('.response').html(response);

        }, 'text');
    });
});
</script><?php
}

So i need some light in the best direction to get it right. Also do we need to use form or button in html input boxes? Or just input boxes?

Is this html okay?

<input style="/*display:none;*/" name="post_id" type='text' id='post_id' value='7' />
<input style="/*display:none;*/" name="meta1" type='text' id='meta1' value='' /> 
<input style="/*display:none;*/" name="meta2" type='text' id='meta2' value='' /> 
<input type="button" id="meta1submit" value="meta1submit" />

Answer 1

Debug your problem in steps:

Is your AJAX call is happening?

• If NOT
  • Check for JavaScript errors if any.
  • Check that your function hooked properly.
• If YES
  • Check you are getting proper element values in JavaScript to post.
  • Print $_POST values in the PHP function, to verify you are getting proper values.

Instead of style="display:none;" to input elements, you can use type='hidden' .

You are using class names to access elements in jQuery, instead you should use IDs of the elements.

And always use nonce in the form for security reason.