Any way to update_post_meta with html content? It gets stripped and becomes empty

Question

So I am cloning some divs created from an array using jQuery. Here is an example.

I have a drop down list that contains items to add to the meta box.

The add button clones a hidden div based on the name in the drop down that matches the rel of the div. This then gets appended into my meta box. So it ends up looking like this.

        echo '<div id="page_selected_elements" name="page_selected_elements" class="page_selected_elements">';
        // content gets cloned into here
        // example div that gets added
        <div rel="Quote" class="page-element element1-4 test" id="page-element">
                <div class="page-element-item">
                    <div class="left-side">
                        <input type="button" value="+" class="increase-size">
                        <input type="button" value="-" class="decrease-size">
                        <span class="element-description">Quote</span>
                    </div>
                    <input type="hidden" id="page-option-item-type" class="page-option-item-type" value="Tab" name="">
                    <input type="hidden" id="page-option-item-size" class="page-option-item-size" value="element1-4" name="">
                    <div class="right-side">
                        <span id="element-size-text" class="element-size-text">1/4</span>
                        <div class="change-element-property">
                                    <input type="button" value="edit" rel="edit-box" id="page-element-edit-box" class="edit-element">
                                    <input type="button" value="Remove" class="remove-element" id="delete-element">
                        </div>
                    </div> 
                </div>
                <div id="my_modal" class="page-element-edit">
                <p>Quote</p>
                <input type="text" id="_cmb_page-option-quote" name="_cmb_page-option-quote" class="cmb_text_small">
                </div>
        </div>
        // end example div that gets added

        // getting the values for displaying after save
        $values = get_post_custom( $post->ID );
        $selected = isset( $values['addddData'] ) ? $values['addddData'][0] : '';
        echo $selected;
        echo '</div>';

     // Save data from metabox
function save( $post_id, $post )  {

    // verify nonce
    if ( ! isset( $_POST['wp_meta_box_nonce'] ) || !wp_verify_nonce( $_POST['wp_meta_box_nonce'], basename(__FILE__) ) ) {
        return $post_id;
    }

    // check autosave
    if ( defined('DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
        return $post_id;
    }

    // check permissions
    if ( 'page' == $_POST['post_type'] ) {
        if ( !current_user_can( 'edit_page', $post_id ) ) {
            return $post_id;
        }
    } elseif ( !current_user_can( 'edit_post', $post_id ) ) {
        return $post_id;
    }

    $cloned = $_POST['page_selected_elements'];
    update_post_meta( $post_id, 'addddData', $cloned );

    //print_r($_POST);

    }

Now the problem is it will not save the contents inside of the div page_selected_elements I can see the key is added via phpmyadmin, but the meta_value is always empty when I save after cloning items "adding items from drop down".

As a test I manually edited the meta_value using phpmyadmin and pasted the example clone div as the value, refreshed and the div was displayed. However once I updated the page the value was removed.

As a test I changed the div page_selected_elements to a textarea to test my save function, and that works just fine, text I enter into the text area gets updated and displayed back on the page after the update.

Can anyone think what the problem might be? Could it have to do with dynamically added content? Maybe the update is not seeing it. I see the cloned items the whole time during the update but once it reloads the page they are gone and the meta_value is empty.

Answer 1

I believe the problem is with your use of sanitize_text_field (line 668 in your pastebin), which will strip markup. Proof of concept:

$str = '<p>Howdy Ho!</p>';
echo $str;
echo sanitize_text_field($str);

You will need to use some other function to clean the data... possibly wp_kses