I have a content editable div:

<div contenteditable="true" id="my-div">
<? if(isset($data["description"])) {
       print_r($data["description"]);
} ?>
</div>

Once the user edits the div I am trying to pass the modified value of the div to a hidden form element.

document.getElementById("desc").value =document.getElementById("my-div").innerHTML();

I am getting the original value on page load, not the modified value as innerHTML.

How do I get the updated value?

I have a content editable div:

<div contenteditable="true" id="my-div">
<? if(isset($data["description"])) {
       print_r($data["description"]);
} ?>
</div>

Once the user edits the div I am trying to pass the modified value of the div to a hidden form element.

document.getElementById("desc").value =document.getElementById("my-div").innerHTML();

I am getting the original value on page load, not the modified value as innerHTML.

How do I get the updated value?

• javascript
• jquery
• html
• contenteditable

• change ".value" with ".innerHTML" and try again – Ismail Altunören Commented Dec 7, 2014 at 20:49
• Where's your code that captures the change in the contenteditable div? That one line isn't enough. – j08691 Commented Dec 7, 2014 at 20:51
• 1 stackoverflow./questions/10328102/… You should attach a listener to the div. From what I see, you dont have a listener to the div. It does not detect the changes on dom element. – Hozikimaru Commented Dec 7, 2014 at 20:52

1 Answer 1

$('#my-div').on('keypress', function() {
    $('#desc').val($(this).html());
});

you need to listen to changes to the editable div and update input value

i assume you use jquery if not

document.getElementById('my-div').addEventListener('keypress', function(e) {
    document.getElementById('desc').value = this.innerHTML;
});