如何从contentEditable div获取html进入隐藏文本表单元素？

Question

I don't believe that you can use the input straight from a content editable div and submit it in a form, so I figured that I could just have a hidden text field and do something like this:

var blog_post = $("#editable_div").html();
$('#hidden_text_area').val(blog_post);

Does anyone know of a way to do this? It is not working with what I have. I thought that maybe the $('#hidden_text_area').val(blog_post); needed to be triggered by an event, but I tried it with a click and it didn't work.

$('#clicker').click(function(){
  $('#hidden_text_area').val(blog_post);
})

Answer 1

Try:

$('#clicker').click(function(){
 var blog_post = $("#editable_div").html();
 $('#hidden_text_area').val(blog_post);
})

Because it does not look like your blog_post variable contains the html content when you click this button.

Answer 2

please check alert($('#hidden_text_area')) is giving object or not . if it is not giving object then it has problem otherwise $('#hidden_text_area').val(blog_post); should work.

Answer 3

Seems to work well for me, however, please be aware that the html in the value attribute will be escaped:

HTML:

<textarea id="content">
    <p style="background-color: blue;">Testing</p>
</textarea>
<input type="button" value="hit me" id="btn" />
<div id="parent">
    <input type="text" name="testinput" id="inputtest" value="" />
</div>

JS:

$("#btn").click(function () {
    var html_contents = $("#content").html();
    $("#inputtest").val(html_contents);
});