Pulling edited text from summernote textarea

Question

I have a list of canned emails in a database. "Thanks for becoming a member", "Thank you for your purchase its on the way" - stuff like that. I am using Bootstrap modals to edit these emails. When I click the edit button, the modal drops down, and is populated with the data from the database: email name, subject, body. I am using Passing data to a bootstrap modal to accomplish this. Works great. Now I am using summernote as my rich text editor.

Here is my textarea that displays the unedited data:

<textarea class="summernote input-block-level" id="content" name="content" rows="18"></textarea> 

The class summernote is how the data gets directed to the output text area so it can be edited. Once the data has been edited, I click submit, and the data should be pulled to the JavaScript with the code below.

    $(document).ready(function()         {           $('button[id=editEmail]').on('click', function()           {  var $email_edbody_array = $('textarea[name="content"]').html($('#summernote').code()); var $email_edbody = $email_edbody_array.html(); console.log("edited email" + $email_edbody); 

The fun part is that this works fine IF the summernote text area is blank - as in if I am creating a new email instead of editing one. The console.log should output the edited email body, but it does not. It outputs the original email body. I am not sure why.

What am I missing to get the edited email into my JavaScript. Below is the main parts of the code that I think matter for this question.

This section is the ouput to the page, and the data redirection for the edit button.

          <?php while ($datarow_emails = pg_fetch_assoc($results_emails))           {            echo "              <tr>                 <td>".$datarow_emails['internal_name']."</td>                  <td>".$datarow_emails['email_subject']."</td>                 <td>".$datarow_emails['type']."</td>                 <td>                         <span class='btn btn-info btn-small open-editEmailModal' data-toggle='modal'                              href='#editEmail' data-inm='".$datarow_emails['internal_name']."'                             data-es='".$datarow_emails['email_subject']."'                             data-bdy='".$datarow_emails['email_body']."'                             data-ty=".$datarow_emails['type']."                             data-ces=".$datarow_emails['canned_email_sid'].">                         <i class='icon-edit icon-white'></i> Edit</span>                          <span class='btn btn-danger btn-small open-delEmailModal' data-toggle='modal'href='#deleteWarning' data-ces=".$datarow_emails['canned_email_sid'].">                         <i class='icon-remove icon-white'></i> Delete</span>                 </td>             </tr>";           }            ?> 

This next part is the jQuery that redirects the data to the modal. The .note-editable is what redirects the email body.

<script> $(document).on("click", ".open-editEmailModal", function() {   var internalName = $(this).data('inm');   var emailSubject = $(this).data('es');   var emailBody = $(this).data('bdy');   var type = $(this).data('ty');   var cannedEmSid = $(this).data('ces');    $(".modal-body #canEmSid").val(cannedEmSid);   $(".modal-body #interName").val(internalName);   $(".modal-body #emailSub").val(emailSubject);   $(".modal-body #emailBdy").val(emailBody);   $(".modal-body .note-editable").html(emailBody);   $(".modal-body #tYpe").val(type); }); </script> 

And here is the modal:

        <div id="editEmail" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="emailActivityLabel" aria-hidden="true">           <div class="modal-header">                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>                 <h3 id="myModalLabel">Edit Canned Response</h3>             </div>             <div class="modal-body">         <form class="form-horizontal">                     <div class="control-group" style="margin-bottom:8px;">                         <label class="control-label" for="inputInternalName">Internal Name</label>                         <div class="controls">                         <input type="text" id="interName" name="interName" placeholder="Internal Name" />                         <input type="hidden" id="canEmSid" name="canEmSid"/>                       </div>                     </div>                     <div class="control-group" style="margin-bottom:8px;">                         <label class="control-label" for="inputInternalName">Type</label>                         <div class="controls">                   <select id="tYpe" name="tYpe">                     <?php                      while ($datearow_typeDD2 = pg_fetch_assoc($results_typesDD2))                     {                     echo "<option value='".$datearow_typeDD2['buyer_seller_sid']."'>".$datearow_typeDD2['buyer_seller_type']."</option>\n";                     }                     ?>                   </select>                         </div>                     </div>                     <div class="control-group" style="margin-bottom:8px;">                         <label class="control-label" for="inputSubject">Email Subject</label>                         <div class="controls">                         <input type="text" id="emailSub" name="emailSub" placeholder="Email Subject">                         </div>                     </div>               </form>                         <!-- <div class="text-editor"></div> -->                     <!-- <div  class="summernote"></div> -->                 <div id="emailEditor">                     <div class="controls">                     <textarea class="summernote input-block-level" id="content" name="content" rows="18"></textarea>                      </div>                 </div>             </div>              <div class="modal-footer">                 <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>                 <button class="btn btn-success" id="editEmail">Save</button>             </div>         </div>  <script type="text/javascript">  $(document).ready(function()  {   $('.summernote').summernote({       });            $('button[id=editEmail]').on('click', function()           {  var $email_edbody_array = $('textarea[name="content"]').html($('#summernote').code()); var $email_edbody = $email_edbody_array.html(); 

Below this is just other variables and the AJAX script.

Answer 1

TomPHP solution does not work with the newer version of summernote. In case anyone stumbles upon this post here is a current solution.

var textareaValue = $('#summernote').summernote('code'); 

Answer 2

Instead of Getting the value of the Field You can use the summernote code() Function.

var textareaValue = $("#summernote").code(); 

For Your Code:

var textareaValue = $("#content").code();