How can I add/update post meta in a admin menu page?

Question

I wanted to create a plugin to batch manage posts' custom field data. I know I can add post meta by add a meta box in post edit screen and use add_action('save_post','function_to_update_meta') to trigger add meta functions.

But I don't know how to trigger the add_post_meta function in a admin menu page (such as a custom admin menu). How to do that?

Thank you in advance!

Answer 1

You will need to use an Ajax function. Which requires javascript to send the form data to your php Ajax function which you can use to run update_post_meta();

Example:

Form Html:

<form>
<input id="meta" type ="text" name="2344" value="<?php echo esc_html( get_post_meta( 2344, '_your_key', true) ); ?>" />
</form>

Javascript:

jQuery(document).ready(function() {
    jQuery("form").submit(function() {
    var post_meta = jQuery("input name=[2344]").val();
    var ID = jQuery(this).attr("name");

    jQuery.ajax({
           type: "POST",
           url: ajaxurl,
           data: {
           action: "update_meta",
           post_id: ID,
           meta: post_meta,
          },
        success: function( data ) {
          //do something
     }
   });
 return false;

});

PHP function:

add_action( 'wp_ajax_update_meta', 'my_function' );
function my_function() {
   $post_id = $_POST['post_id'];
   $meta = $_POST['post_meta'];

  update_post_meta( $post_id, '_your_key', $meta );

  echo 'Meta Updated';
  die();
}

Answer 2

I added some console.log function for testing, but this is basically doning the same thing as @Chris_() answer:

Menu callback function to generate menu content (PHP):

function ajax_menu_callback() {
?>
<div class="wrap">
    <div id="icon-themes" class="icon32"></div>
    <h2>Test</h2>
    <br />
    <form>
        <input id="meta" type ="text" name="1" value="<?php echo esc_html( get_post_meta( 1, 'your_key', true) ); ?>" />
        <?php submit_button(); ?>
    </form>
</div>
<?php
}

Then the javascript to print on the admin side (javascript, don't forget to include a jquery library):

jQuery(document).ready(function() {
    $("form").submit(function() {
        console.log('Submit Function');
        var postMeta = $('input[name="1"]').val();
        console.log(postMeta);
        var postID = 1;
        var button = $('input[type="submit"]');
        button.val('saving......');
        $.ajax({
            data: {action: "update_meta", post_id: postID, post_meta: postMeta, },
            type: 'POST',
            url: ajaxurl,
            success: function( response ) { console.log('Well Done and got this from sever: ' + response); }
        }); // end of ajax()
        return false;
    }); // end of document.ready
}); // end of form.submit

Then the PHP function handle update_post_meta (PHP):

add_action( 'wp_ajax_update_meta', 'my_ajax_callback' );
function my_ajax_callback() {
    $post_id = $_POST['post_id'];
    $post_meta = $_POST['post_meta'];
    update_post_meta( $post_id, 'your_key', $post_meta );
    echo 'Meta Updated';
    die();
} // end of my_ajax_callback()