-2

Basically I have a element as is demonstrated here:

<!DOCTYPE html>
<html>
<body>

<p contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>

</body>
</html>

The user can paste data into that field and therefore change the contents between the

tags. The reason to do this is to get the metadata (like hyperlinks, etc.) that would be lost with a simple <textarea> element.

How can you copy this data into an <input type=hidden> element, if the content is changed by the user?

This question is unlike this question where there is no output of the data (a static text is shown, which does not indicate how to access the real data that the User has entered) and the input is of a different type (<div> vs. <p>)

Community
  • 1
  • 1
Roland Seuhs
  • 1,878
  • 4
  • 27
  • 51

4 Answers4

3

HTML:

<p id="input" contenteditable="true" onKeyup="myFunction()">This is a paragraph. It is editable. Try to change this text.</p>

<input type="text" id="output">

Javascript:

function myFunction() {
    document.getElementById("output").value = document.getElementById("input").innerHTML;
}

JSfiddle: http://jsfiddle.net/qw2oveuo/1/

0

You can combine the input event with the innerHTML to grab the data:

document.querySelector("p").addEventListener("input", function(e) {
   document.querySelector("input[type=hidden]").value = e.target.innerHTML;
});

Working Example

This will update the hidden input any time the user changes the content of the p either by keypress or copy/paste.

CodingIntrigue
  • 75,930
  • 30
  • 170
  • 176
-1

Just add a listener that gets your text and put it somewhere else:

var get = document.getElementById('getcontenthere');
var put = document.getElementById('putcontenthere');

var updateInput = function() {
  put.value = get.innerText;
}

get.oninput = updateInput;

updateInput();
<!DOCTYPE html>
<html>

<body>

  <p id="getcontenthere" contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>

  <p>This is type=text so you can see it, but it could be hidden as well</p>
  <input id="putcontenthere" type="text">

</body>

</html>
Jon Surrell
  • 9,444
  • 8
  • 48
  • 54
-1

You can use the jQuery .html() method to get the content of the p tag

 <p id="my-contenteditable-p" contenteditable="true">This is a paragraph. It is editable. Try to change this text.</p>
 <input type="hidden" id="hidden-in"/>

like

  var content = $('#my-contenteditable-p').html();

and after checking if the content is changed by the user, You can use jQuery .val() method to set the value to hidden field.

$("#hidden-in").val(content);
Robin
  • 854
  • 8
  • 20