setting text in text area when it contains html tags

Question

I know this question has already been asked but mine is a little different.

I have a textarea whose value I have set like so:

<textarea><span>all this inside textarea</span></textarea>

now i am doing some ajax with jQuery and want to set the value of the textarea via jQuery.

Following is my jQuery code.

jQuery(function(){
  jQuery("select#rooms").change(function(){
    var options = '';
    jQuery.getJSON("/admin/selection.php",{id: jQuery(this).val(), ajax: 'true'},
    function(j){
      for (var i = 0; i < j.length; i++) {
        options = j[i].topImage;
jQuery('#toppic').val(options); 
jQuery('#title').val(j[i].title); 
alert(j[i].content); //this is text area content. it has html tags
jQuery('#content').attr(j[i].content); //text area
      }
    })
  })
})

EDIT: my json response is:

[ {topImage: 'cfil823', title: 'Dining', content: '<SPAN STYLE= "" >Dining Rooms must be simultaneously inviting enough for a festive Sunday brunch and intimate enough for a 
crown jewel in the room. </SPAN>'}]

is there a way in jquery to escape html tags?

Also, initially the textarea was set like this:

<textarea id="content" wrap="hard"><?php echo $comma_separated?></textarea>

Answer 1

You should set the textarea content with the val function:

Change:

jQuery('#content').attr(j[i].content);

To:

jQuery('#content').val(j[i].content);

Edit: In response to your comment, you should check the JSON object returned from your request I highly recommend you to use Firebug to debug your callback

The textarea isn't been cleared because I'm pretty sure that j[i].content is undefined, if you want to clear its value in this case you can:

jQuery('#content').val(j[i].content || '');

So if j[i].content is undefined, null, 0 or false, the textarea will be cleared.

Answer 2

<textarea><span>all this inside textarea</span></textarea>

That is invalid. Since there is no such thing as tags-inside-a-textarea, the browser will clean up after you and turn it into what you should have written:

<textarea>&lt;span>all this inside textarea&lt;/span></textarea>

but you shouldn't rely on it. If your text contains the string </textarea> you'll lose and may suffer script-injection holes.

Setting textarea.value, or jQuery $(textarea).val(), on the other hand, should contain characters like < directly, since they're just plain text, not HTML.

Right now i dont see anything in the alert box

Then CMS is right and your j[i].content doesn't contain the HTML content you think it does.

Answer 3

Thanks for all the insight guys. But I just found out my problem. id attribute of my text area was 'content' ...which was the same name of my key in the json object. Apparently javascript does not like that and was not behaving the way we were talking about.

So if anyone is having the same problem..make sure your the id attribute name is not same as the key in the json object