Edit post meta with checkboxes on front end

Question

My gut instinct would be to roll my own AJAX callback. You obviously know the post ID (since you have it on the front end) and the names of the fields, just post that back to WP using AJAX and programmatically set the values there.

An untested example (props to Kailey Lampert):

// Add checkboxes to post content
add_filter( 'the_content', 'cba_add_checkboxes'); 
function cba_add_checkboxes( $c ) {

    $first = get_post_meta( get_the_ID(), 'first_item_key', true );
    $second = get_post_meta( get_the_ID(), 'second_item_key', true );

    $c .= '<p class="cba"><input type="checkbox"  name="test_value_1" '. checked( $first, 'true', false ) .' /><br />
    <input type="checkbox" name="test_value_2" '. checked( $second, 'true', false ) .' />
    <input type="hidden" name="post_id" value="'. get_the_ID() .'" /><br /><span class="response"></span></p>';

    return $c;
}

// Add scripts to the footer
add_action('wp_footer', 'cba_script');
function cba_script() {
    wp_enqueue_script('jquery');
    ?><script>
    jQuery(function($) {
        var ajaxurl="<?php echo admin_url( "admin-ajax.php' ); ?>';
        var spinner="<?php echo admin_url( "images/loading.gif' ); ?>';
        $('.cba 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(),
                'first_item': p.find('input[name="test_value_1"]').is(':checked'),
                'second_item': p.find('input[name="test_value_2"]').is(':checked')
            }, function( response ) {

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

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

// Add handlers within WordPress to deal with the AJAX post
add_action( 'wp_ajax_update_custom_fields', 'cba_update_custom_fields' ); // for logged-in users
add_action( 'wp_ajax_nopriv_update_custom_fields', 'cba_update_custom_fields' ); // for logged-out users
function cba_update_custom_fields() {
    $post_id = $_POST[ 'post_id' ];
    $first_item = $_POST[ 'first_item' ];
    $second_item = $_POST[ 'second_item' ];

    update_post_meta( $post_id, 'first_item_key', $first_item );
    update_post_meta( $post_id, 'second_item_key', $second_item );

    die( 'updated' );
}

Update Based on Markup

Now that we know a little more what you’re doing, we can be a bit more specific on the JS code you need to use.

Basically, what I recommend you do is set up a custom class and some data elements inside your checkboxes. So where you have things like:

<td><input type="checkbox" name="28-scheduled"  /></td> 
<td><input type="checkbox" name="28-completed"  /></td>

Become things like:

<td><input type="checkbox" name="28-scheduled" class="ajax-checkbox" data-post="28" data-type="scheduled" /></td> 
<td><input type="checkbox" name="28-completed" class="ajax-checkbox" data-post="28" data-type="completed" /></td>

Now, you can set up a jQuery event listener on the entire table that looks at each input individually:

jQuery(function($) {
    $('table').on('change', 'input.ajax-checkbox', function() {
        var $this = $(this), 
            type = $this.data('type'), 
            postID = $this.data('post');

        // ... Now send off your AJAX request as before
    });
});

This event listener will wait for the change event of all <input> elements that have the ajax-checkbox class. It will then extract the values you’ve hard-coded (PHP-generated, I hope) from the data-attributes so you can send them in your AJAX request. You’ll have to merge this in with the examples above or the custom code you’re already written to dispatch the messages.

Update Based on Markup

Related Posts: