jQuery .append() not appending to textarea after text edited

Solution 1:

2 things.

First, <textarea/> is not a valid tag. <textarea> tags must be fully closed with a full </textarea> closing tag.

Second, $(textarea).append(txt) doesn't work like you think. When a page is loaded the text nodes inside the textarea are set the value of that form field. After that, the text nodes and the value can be disconnected. As you type in the field, the value changes, but the text nodes inside it on the DOM do not. Then you change the text nodes with the append() and the browser erases the value because it knows the text nodes inside the tag have changed.

So you want to set the value, you don't want to append. Use jQuery's val() method for this.

$(document).ready(function(){
  $(".hashtag").click(function(){
    var txt = $.trim($(this).text());
    var box = $("#text-box");
    box.val(box.val() + txt);
  });
});

Working example: http://jsfiddle.net/Hhptn/

Solution 2:

Use the val() function :)

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="hashtag">#one</div>
        <div class="hashtag">#two</div>
        <form accept-charset="UTF-8" action="/home/index" method="post">
            <textarea id="text-box"></textarea>
            <input type="submit" value ="ok" id="go" />
        </form>
        <script type="text/javascript">
$(document).ready(function(){

  $(".hashtag").click(function(){
    var txt = $.trim($(this).text());
    $("#text-box").val($("#text-box").val() + txt);
  });
});
        </script>
    </body>
</html>

Does that help?

The reason append does not seem to work is because the value of the textarea is made up of the child node, but by treating it as multiple seperate nodes the screen won't update, according to my Firebug. Firebug will show me the updated child nodes, but NOT the text I typed manually into the textarea, whereas the screen shows me the manually typed text but not the new nodes.

Solution 3:

You can reference by value of textarea.

$(document).ready(function () {
     window.document.getElementById("ELEMENT_ID").value = "VALUE";
});

function GetValueAfterChange()
{
   var data = document.getElementById("ELEMENT_ID").value;
}

works fine.

jQuery .append() not appending to textarea after text edited

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts