0

I'm trying to get the value of the text area next to the button and it just returns undefined every time.

script:

 $('#comments-container').on('click', '#edit-comment-btn', (e) => {
        e.preventDefault();
        e.stopImmediatePropagation();

        var commentId = $(this).parent().find('textarea:nth-child(2)').val();
        var commentText = $(this).parent().find('textarea:nth-child(3)').val();
        alert(commentId);
        return;   //for testing. always returns undefined for some reason

        $.get('/openEditComment', {commentId: commentId, commentText: commentText, openCommentEditJs: true}, (data) => {
            $(this).parent().replaceWith(data);

        })
    })

view: 

{{#if userOwnsComment}}
    <div class="p-2">
        <form id="deleteCommentForm" name="deleteCommentForm" method="GET" action="/deleteComment">
            <button id="delete-comment-btn" name="delete-comment-btn" class="btn btn-outline-danger">Delete</button>
            <textarea readonly="readonly" id="commentId" name="commentId" style="display: none;">{{_id}}</textarea>
        </form>
    </div>
     <div class="p-2">
         {{#if openEditComment}}
            <form id="submitEditCommentForm" name="submitEditCommentForm" method="GET" action="/submitEditComment">
                <textarea class='text-submission' id='editCommentInput' name='editCommentInput' placeholder='Edit Comment' style='width: 100%; max-width: 100%;' rows='1'>{{text}}</textarea>
                <button id="submit-edit-comment-btn" name="submit-edit-comment-btn" class="btn btn-danger">Save</button>
                <textarea readonly="readonly" id="commentId" name="commentId" style="display: none;">{{_id}}</textarea>
            </form>
        {{else}}
            <form id="editCommentForm" name="editCommentForm" method="GET" action="/openEditComment">
                <button id="edit-comment-btn" name="edit-comment-btn" class="btn btn-outline-danger">Edit</button>
                <textarea readonly="readonly" id="commentId" name="commentId" style="display: none;">{{_id}}</textarea>
                <textarea readonly="readonly" id="commentText" name="commentText" style="display: none;">{{text}}</textarea>
            </form>
        {{/if}}
    </div>
    {{/if}}

I have tried getting the value through $(this).next().find('textarea').eq(0); and still nothing.

SS-Salt
  • 139
  • 7
  • What does this give you? `console.log($(this).parent().find('textarea:nth-child(2)').length)`? – freedomn-m May 06 '20 at 11:19
  • `$(this).next()` given your html *should* be the `commentId` `textarea` - so adding `.find(textarea)` will not work. – freedomn-m May 06 '20 at 11:21
  • 2
    In order to use the `this` keyword within your click handler, you must use a function, not an arrow function here: `(e) => {` – Turnip May 06 '20 at 11:22
  • @Turnip This seems to have worked. Thank you so much. Though I'm curious as to why this is the case? – SS-Salt May 06 '20 at 11:23
  • @SS-Salt https://stackoverflow.com/questions/28798330/arrow-functions-and-this – Turnip May 06 '20 at 11:25

0 Answers0