How to display <input type=''text'> without creating a textbox in jquery?

Question

I have a comment box(textarea) in which the user types something and when he hits enter that thing is automatically displayed in 'comment section'. Now when the user hits submit I'm executing the following code,

var comment = $("#commentBox").val();
var commentSection = $("#commentSection");
comment.appendTo(commentSection);

By the above code the comment typed by user is dynamically displayed in the commentSection. This works fine but when user types something like,

<input type='text'>

in the comment box then a textbox is created within the comment section. So is there a way through which I could not let this happen? Thanks in advance.

Please do a google search on "input sanitization"

arocketman
– arocketman

2014-05-01 07:03:38 +00:00
Commented May 1, 2014 at 7:03 — arocketman
– arocketman, Commented May 1, 2014 at 7:03
What are you trying to achieve?

Per Hornshøj-Schierbeck
– Per Hornshøj-Schierbeck

2014-05-01 07:04:01 +00:00
Commented May 1, 2014 at 7:04 — Per Hornshøj-Schierbeck
– Per Hornshøj-Schierbeck, Commented May 1, 2014 at 7:04
You can use encodeURI(comment) that may do the trick.

ranieri
– ranieri

2014-05-01 07:04:49 +00:00
Commented May 1, 2014 at 7:04 — ranieri
– ranieri, Commented May 1, 2014 at 7:04

Karl Viiburg · Accepted Answer · 2014-05-01 07:04:53Z

6

One way would be to just append the data as .text

Something like this:

var comment = $("#commentBox").val();
var commentSection = $("#commentSection");
commentSection.text(comment);

Edit: To append to an existing part of the comment, replace:

commentSection.text(comment);

with:

commentSection.text(commentSection.text() + comment);

answered May 1, 2014 at 7:04

Karl Viiburg

8321 gold badge11 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rory McCrossan Over a year ago

But this will over-write anything in the box when a second comment is added.

Michael Lorton Over a year ago

@RoryMcCrossan -- picky, picky. commentSection.text(commentSection.text() + comment).

Karl Viiburg Over a year ago

@RoryMcCrossan my bad, I didn't understand the question completely, I have updated my anwser

Saumil Over a year ago

+1 for the simplicity of your answer but the expression given by chris97ong helped me for other purposes too.

chris97ong · Accepted Answer · 2014-05-01 07:03:19Z

4

You have to convert the string to entities. Define this function:

function htmlencode(str) {
    return str.replace(/[&<>"']/g, function($0) {
        return "&" + {"&":"amp", "<":"lt", ">":"gt", '"':"quot", "'":"#39"}[$0] + ";";
    });
}

Then run the following code when the user hits enter:

var comment = htmlencode($("#commentBox").val());
var commentSection = $("#commentSection");
comment.appendTo(commentSection);

answered May 1, 2014 at 7:03

chris97ong

7,0809 gold badges37 silver badges54 bronze badges

Comments

Naeem Shaikh · Accepted Answer · 2014-05-01 07:11:25Z

2

Try this ,

div.insertAdjacentHTML( 'beforeend', comment);

answered May 1, 2014 at 7:11

Naeem Shaikh

15.8k8 gold badges53 silver badges92 bronze badges

Comments

xzegga · Accepted Answer · 2014-05-01 07:12:38Z

2

You can use

var commentText = $("#commentBox").text();

but this do not clean html tags on your string, additionally you can use a function to do this

function RemoveHTMLTags(vals) {
            var regX = /(<([^>]+)>)/ig;
            var html = vals;
            return (html.replace(regX, ""));
        }

and then you use:

var finalComment = RemoveHTMLTags(commentText);

answered May 1, 2014 at 7:12

xzegga

3,1693 gold badges29 silver badges47 bronze badges

Collectives™ on Stack Overflow

How to display <input type=''text'> without creating a textbox in jquery?

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related