I have a jquery modal that is displayed for getting user's comment when the user clicks on the reject button in the page.

The problem is when I type some comment and confirm the reject button in the modal, I cant get the value of the commenting textarea. when I reload the page, and do this process again, I get the value of the textarea before I had reloaded the page.

Here is the jquery functions:

$("#rejectBtnHOD").on('click', function(){
    $("#modal-container-522009").modal(); // Displays modal well
});

$(document).on("click", "#confirmRejection", function(){
    var vid = "<?php echo $fields['vid']; ?>"; // getting the request id well
    var rejComment = $('body').find('#comment').val(); // cant get the value of textarea

    alert(rejComment); return false;
});

HTML code (modal):

<div class="modal fade" id="modal-container-522009" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                <h4 class="modal-title" id="myModalLabel">
                    Leave a comment!
                </h4>
            </div>
            <div class="modal-body" style="height: 300px;">
                <textarea id="comment" class="col-md-12" style="height: 200px;" ></textarea>
            </div>
            <div class="modal-footer">
                 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button id="confirmRejection" type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>

BTW, If I replace the <textarea> tag with an <input type="text">, it works just fine!

To get the value of a text area you have to do

$("#ID").html()

since you're getting the value between the XML labels.

more