how to trim whitespace and not the content in javascript?

Question

So, i am aware that javascript can trim the whitespace, and it trims the whitespace in the textarea field but it removes the content.

I want to trim the whitespace and keep the characters(the post content)

App.js

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 & 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
        });
});

For more references

Dashboard.blade.php

@extends('layouts.layout')
@section('title')
Dashboard
@endsection
@section('content')
<div class="dashboard eli-main">
    <div class="container ">
        <div class="row">
            <div class="col-md-6 col-md-12 push-right">
                <h1>{{$user->username}}</h1>

                <h4>What do you have to say?</h4>
                <form class="make-post">
                    <div class="form-group">
                        <textarea class="form-control" name="body" id="new-post" rows="5" placeholder="Your Post"></textarea>
                    </div>
                    <button type="button" id="add" class="mybtn2">Create Post</button>
                    <input type="hidden" value="{{ Session::token() }}" name="_token">
                </form>
                {{ csrf_field() }}


                <article id="owl6" class="post"></article>

                @foreach($posts as $post)
                        <article class="post eli-main" data-postid="{{ $post->id }}">
                         <h3>{{$post->user->username}}</h3>
                            <p id="ed" class="post-bod">{{$post->body}}</p>
                            <div class="info">
                               made on {{ date('F d, Y', strtotime($post->created_at)) }}
                            </div>
                        <div class="interaction">
                            @if(Auth::user() == $post->user)

                                <a href="#" class="edit">Edit</a> |
                                 <a href="{{ route('post.delete', ['post_id' => $post->id]) }}">Delete</a>

                            @endif
                        </div>

                   </article>


                @endforeach




            </div>


        </div>
    </div>
</div>
    <div class="modal fade" tabindex="-1" role="dialog" id="edit-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title">Edit Post</h2>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="post-body">Edit the Post</label>
                            <textarea class="form-control" name="post-body" id="post-body" rows="5"></textarea>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" id="modal-save">Save changes</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->



    <script>
        var token = '{{ Session::token() }}';

        var urlEdit = '{{ route('edit') }}';

    </script>
@endsection

`document.getElementById("ed")` does not exist. The ID of the `textarea` is `post-body`. — Dan Philip Bejoy, Apr 15 '17 at 18:37
it still does not work, it removes the post content instead of just the whitespace — BARNOWL, Apr 15 '17 at 18:48

score 0 · Answer 1 · edited May 23 '17 at 12:09

0

Besides using the wrong ID (it's “post-body”, not “ed”), you're getting the innerHTML of the text area, and trim it – that's the string you want. But then in the next line, you try to get a property textContent from your string, which will be undefined.

You should rewrite those two lines to this:

postBodyElement = document.getElementById("post-body");
var postBody = postBodyElement.value.trim();

Note we're using value instead of innerHTML here, according to another SO post, this is the best way to get the value of a text area.

edited May 23 '17 at 12:09

Community

1
1

answered Apr 15 '17 at 18:58

Patrick Hund

19,163
11
66
95

I made an update to the post, with the full dashboard file, it still does not return the post content within the textarea. – BARNOWL Apr 15 '17 at 19:06

how to trim whitespace and not the content in javascript?

1 Answers1