从 contenteditable div 中获取价值 [英] Getting value from contenteditable div

问题描述

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

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

HTML:

<div name="post_field" class="new-post post-field" placeholder="发表评论..." 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><div class="post-buttons btn-toggle"><button class="btn-new pull-right" type="submit">Submit</button>

</表单>

JQuery Ajax:

$(document).ready(function() {$(document).on("submit", "form", function(event) {event.preventDefault();$.ajax({url: 'php/post.php',类型:'POST'，数据类型:'json'，数据:$(this).serialize(),成功:功能(数据){警报(数据.消息)；}});});});

PHP (post.php):只是您的典型检查并回显消息.这只是代码片段.

 $post_content);回声 json_encode($array);?>

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

请帮忙！

解决方案

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

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

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!

解决方案

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

这篇关于从 contenteditable div 中获取价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！