title: how to trim whitespace and not the content in javascript?
body: <p>So, i am aware that javascript can trim the whitespace, and it trims the whitespace in the textarea field but it removes the content.</p>
  
  <p>I want to trim the whitespace and keep the characters(the post content)</p>
  
  <p><strong>App.js</strong></p>
  
  <pre><code>var postId = 0; //get data-postid from dashboard article
  var postBodyElement = null; //for .done - update page without refresh
  
  $('.post').find('.interaction').find('.edit').on('click', function (event) {
  
      event.preventDefault();
  
      postBodyElement = document.getElementById("ed").innerHTML.trim();
      var postBody = postBodyElement.textContent;
  
      postId = event.target.parentNode.parentNode.dataset['postid']; //get data-postid from dashboard article
      $('#post-body').val(postBody);
      $('#edit-modal').modal();
  });
  
  //urlEdit &amp; token are set in the dashboard.blade.php
  $('#modal-save').on('click', function () {
      $.ajax({
              method: 'POST',
              url: urlEdit,
              data: {body: $('#post-body').val(),postId: postId, _token: token} //get data-postid from dashboard article
          })
          .done(function (msg) {
              //console.log(msg['message']);
              ///console.log(JSON.stringify(msg));
              $(postBodyElement).text(msg['new_body']); //update page without refresh
              $('#edit-modal').modal('hide'); //hide modal
          });
  });
  </code></pre>
  
  <p>For more references</p>
  
  <p><strong>Dashboard.blade.php</strong></p>
  
  <pre><code>@extends('layouts.layout')
  @section('title')
  Dashboard
  @endsection
  @section('content')
  &lt;div class="dashboard eli-main"&gt;
      &lt;div class="container "&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6 col-md-12 push-right"&gt;
                  &lt;h1&gt;{{$user-&gt;username}}&lt;/h1&gt;
  
                  &lt;h4&gt;What do you have to say?&lt;/h4&gt;
                  &lt;form class="make-post"&gt;
                      &lt;div class="form-group"&gt;
                          &lt;textarea class="form-control" name="body" id="new-post" rows="5" placeholder="Your Post"&gt;&lt;/textarea&gt;
                      &lt;/div&gt;
                      &lt;button type="button" id="add" class="mybtn2"&gt;Create Post&lt;/button&gt;
                      &lt;input type="hidden" value="{{ Session::token() }}" name="_token"&gt;
                  &lt;/form&gt;
                  {{ csrf_field() }}
  
  
                  &lt;article id="owl6" class="post"&gt;&lt;/article&gt;
  
                  @foreach($posts as $post)
                          &lt;article class="post eli-main" data-postid="{{ $post-&gt;id }}"&gt;
                           &lt;h3&gt;{{$post-&gt;user-&gt;username}}&lt;/h3&gt;
                              &lt;p id="ed" class="post-bod"&gt;{{$post-&gt;body}}&lt;/p&gt;
                              &lt;div class="info"&gt;
                                 made on {{ date('F d, Y', strtotime($post-&gt;created_at)) }}
                              &lt;/div&gt;
                          &lt;div class="interaction"&gt;
                              @if(Auth::user() == $post-&gt;user)
  
                                  &lt;a href="#" class="edit"&gt;Edit&lt;/a&gt; |
                                   &lt;a href="{{ route('post.delete', ['post_id' =&gt; $post-&gt;id]) }}"&gt;Delete&lt;/a&gt;
  
                              @endif
                          &lt;/div&gt;
  
                     &lt;/article&gt;
  
  
                  @endforeach
  
  
  
  
              &lt;/div&gt;
  
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
      &lt;div class="modal fade" tabindex="-1" role="dialog" id="edit-modal"&gt;
          &lt;div class="modal-dialog"&gt;
              &lt;div class="modal-content"&gt;
                  &lt;div class="modal-header"&gt;
                      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;&lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;&lt;/button&gt;
                      &lt;h2 class="modal-title"&gt;Edit Post&lt;/h2&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-body"&gt;
                      &lt;form&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="post-body"&gt;Edit the Post&lt;/label&gt;
                              &lt;textarea class="form-control" name="post-body" id="post-body" rows="5"&gt;&lt;/textarea&gt;
                          &lt;/div&gt;
                      &lt;/form&gt;
                  &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
                      &lt;button type="button" class="btn btn-primary" id="modal-save"&gt;Save changes&lt;/button&gt;
                  &lt;/div&gt;
              &lt;/div&gt;&lt;!-- /.modal-content --&gt;
          &lt;/div&gt;&lt;!-- /.modal-dialog --&gt;
      &lt;/div&gt;&lt;!-- /.modal --&gt;
  
  
  
      &lt;script&gt;
          var token = '{{ Session::token() }}';
  
          var urlEdit = '{{ route('edit') }}';
  
      &lt;/script&gt;
  @endsection
  </code></pre>