从 contenteditable div 中获取价值

Question

到目前为止，我一直使用文本区域作为表单的主要输入。我已将其更改为使用 contenteditable div，因为我想允许一些格式。

以前，当我拥有 textarea 时，使用 Ajax 和 PHP 提交的表单很好。现在我已将其更改为使用 contenteditable div，它不再起作用，我不知道为什么。

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)：只是您的典型检查并回显消息。这只是代码的sn-p。

<?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);

?>

由于某种原因，自从我添加了 contenteditable div 后，它就不再发回帖子内容了。

请帮忙！

Answer 1

div 的内容未序列化。您必须自己添加它们。

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