5

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.

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

4 Answers 4

10

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

Call .text().

11
  • I already tried it but it did not work, when i check the tutorials, .text() I think does not work when it is a user input value, can .text() really work for input tag values?
    – SimonBASS
    Jun 15, 2012 at 2:15
  • 1
    @SimonBASS: looks like you're still thinking we understand what you mean. Unfortunately we don't
    – zerkms
    Jun 15, 2012 at 2:17
  • @SimonBASS: No. The value from val() is an ordinary string. Your problem comes from displaying the value. You need to call the .text(...) setter.
    – SLaks
    Jun 15, 2012 at 2:17
  • You need to understand what's going on here, or you won't get anywhere.
    – SLaks
    Jun 15, 2012 at 2:18
  • I think he'd like to show <b> as &lt;b&gt; (shows literal <>) from the input value, whereas text() discards it Jun 15, 2012 at 2:19
1

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

0

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.

0

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

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.