I have a jQuery function that gets the value from a form input text object named content in which a user can enter an HTML tag in the form. For example, the user types "Sample" with <b> tags. Once submit is fired, jQuery gets the value from content.

var content = $('[name=content]').val();

My problem is if the user has a tag lets say a <b> tag, I want to output the raw html string to the user instead of having it rendered.

How can I do it? Any help will be much appreciated, I'm new to jQuery.

I have a jQuery function that gets the value from a form input text object named content in which a user can enter an HTML tag in the form. For example, the user types "Sample" with <b> tags. Once submit is fired, jQuery gets the value from content.

var content = $('[name=content]').val();

My problem is if the user has a tag lets say a <b> tag, I want to output the raw html string to the user instead of having it rendered.

How can I do it? Any help will be much appreciated, I'm new to jQuery.

• javascript
• jquery

• i tried .html() and .text() but it won't work, i think because values came from the user. – SimonBASS Commented Jun 15, 2012 at 2:17
• How/where are you showing the output to the user? – user1106925 Commented Jun 15, 2012 at 2:18
• @am not i ma - I want to display it by appending it to a div. – SimonBASS Commented Jun 15, 2012 at 2:22
• 4 this is what you are looking for? jsfiddle.net/ApyJt – Andreas Wong Commented Jun 15, 2012 at 2:23

4 Answers 4

.val() already returns a string.
You're asking how to display that string without parsing it as HTML.

Call .text().

Okay, so it sounds like you are wanting to display the code without the browser rendering it. Perhaps you want to convert your tags to html enttities

Without jQuery, you would do:

document.getElementsByName('content')[0].value;

to get exactly the stirng that the user entered.

Edit

Now I get it, you are writing the value as the innerHTML of another element and you want the literal text displayed, not the markup. So continuing with a sans-jQuery example:

<script>
// Set the text content of an element
var setText = (function() {
    var d = document.createElement('div');
    if (typeof d.textContent == 'string') {
      d = null;
      return function(el, text) {
        el.textContent = text;
      };
    } else if (typeof d.innerText == 'string') {
      d = null;
      return function(el, text) {
        el.innerText = text;
      };
    }
}());
</script>

<input name="content">
<button onclick="
  setText(document.getElementById('d0'), 
          document.getElementsByName('content')[0].value);
">get value</button>
<div id="d0"></div>

Or as SLaks suggests (rather cryptically):

$('#d0').text($('[name=content]').val());

Though I don't know why it wasn't in his or her answer.

I was also having this problem. I fixed it using the following cheat:

var val = $("#item").val() + "";