Getting value from contenteditable div

Question

Up to this point, I've been using a textarea as the main input for a form. I've changed it to use a contenteditable div because I wanted to allow some formatting.

Previously, when I had the textarea, the form submitted fine with Ajax and PHP. Now that I've changed it to use a contenteditable div, it doesn't work anymore and I can't tell why.

HTML:

<form>
    <div name="post_field" class="new-post post-field" placeholder="Make a comment..." contenteditable="true"></div>
    <input name="user_id" type="hidden" <?php echo 'value="' . $user_info[0] . '"' ?>>
    <input name="display_name" type="hidden" <?php echo 'value="' . $user_info[2] . '"' ?>>
    <ul class="btn-toggle format-post">
        <button onclick="bold()"><i class="fa-icon-bold"></i></button>
        <button onclick="italic()"><i class="fa-icon-italic"></i></button>
    </ul>
    <div class="post-buttons btn-toggle">
        <button class="btn-new pull-right" type="submit">Submit</button>
    </div>
</form>

JQuery Ajax:

$(document).ready(function() {
    $(document).on("submit", "form", function(event) {
        event.preventDefault();
        $.ajax({
            url: 'php/post.php',
            type: 'POST',
            dataType: 'json',
            data: $(this).serialize(),
            success: function(data) {
                alert(data.message);
            }
        });
    });
});

PHP (post.php): Just your typical checks and echo a message back. This is just a snippet of the code.

<?php

    $user_id = $_POST["user_id"];
    $display_name = $_POST["display_name"];
    $post_content = $_POST["post_field"];

    $array = array('message' => $post_content);
    echo json_encode($array);

?>

For some reason, it's not sending back the post content anymore ever since I added the contenteditable div.

Please help!

Answer 1

The contents of the div are not serialized. You would have to add them on your own.

var data = $(this).serialize();
data += "post_field=" + encodeURIComponent($("[name=post_field]").html());