Get text from textarea and append it to a hidden input

Question

I'm having a really hard time with this. I have a template that uses a bootstrap wysiwyg and has this structure (which is added dynamically when loading the template):

<div class="col-sm-10">
  <div class="summernote" style="display: none;"></div>
  <div class="note-editor">
    <div class="note-dropzone">//content</div>
    <div class="note-dialog">//content</div>
    <div class="note-handle">//content</div>
    <div class="note-popover">//content</div>
    <div class="note-toolbar btn-toolbar">//content</div>
    <textarea class="note-codable"></textarea>
    <div class="note-editable" contenteditable="true">  
       <p></p>
    </div>  
</div>

I have noticed that when inspecting the code, what I write inside the editor is being added to the p tag.

my question is, how do I get to "catch" what the user writes on the wysiwyg textarea and receive it when sending through $_POST in php?

So far, my approach is:

• get the p and add an id

• add to the pa blur function so when user stops writing and clicks outside, content can be copied into a hidden input

  window.onload = function(){ var paragraph = $('.note-editable').find('div').find('p:first'); paragraph.id = 'pr'; $("#pr").blur(function(){ alert("This input field has lost its focus."); }); }

of course I'm not having success with this and my head is a little bit burned right now. Any help appreciated.

Answer 1

Just use the built in method for summernote to get the code, then use jQuery to convert it to text.

var html = $('.summernote').code();
$('#hiddenField').val($(html).text());

Answer 2

Try using input event , this.textContent within handler to retrieve text within .note-editable element

 $(".note-editable").on("input", function(e) { console.log(this.textContent) })

 .note-editable { border:1px solid #000; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <div class="col-sm-10"> <div class="summernote" style="display: none;"></div> <div class="note-editor"> <div class="note-dropzone">//content</div> <div class="note-dialog">//content</div> <div class="note-handle">//content</div> <div class="note-popover">//content</div> <div class="note-toolbar btn-toolbar">//content</div> <textarea class="note-codable"></textarea> <div class="note-editable" contentEditable="true"> <p></p> </div> </div>