Insert text into a textarea using javascript without javascript parsing the text

Question

'<textarea name="textChange" class="signatureChangeText" cols="100" rows="4">'
+ SOME VARIABLE FULL OF TEXT
+ '</textarea>'

The preceding is just part of a simple string that I am using with a change to an innerHTML attribute of a div inside of a javascript function. That "SOME VARIABLE FULL OF TEXT" is the problem, if that variable contains a string that contains javascript parseable data (data to interpret) such as addition symbols or quotations, etc - the script breaks. How do I avoid this? By the way, the variable is dynamic to each user, it is filled by a php echo statement and so inserted on the backend into the javascript. I've thought of how to accomplish this in another way but none are coming the mind. The data is from a database, I pull it with PHP and I need to insert it into this textarea that is dynamically created and inserted into the page based on a user command via innerHTML. Thanks for any help.

Edit: requested context function:

else if (theChange == 'signature') {
        document.getElementById('userPanelChangeBox').innerHTML = 
        '<form action="tinUser_processor.php" method="post">'
        +'Signatures cannot contain any markup (HTML, BBCode, etc) or styling and can only be 4 lines<br />'
        +'Enter your new signature:<br /><br />'
        +'<textarea name="textChange" class="signatureChangeText" cols="100" rows="4">'
        +'<?php echo $userInfo['signature']; ?>'+'</textarea><br /><br />'
        +'<input type="hidden" value="signature" name="typeChange" />'
        +'<input type="submit" value="Submit Change" name="submitter" /></form>';
        }

Put simply, I'm trying to escape dynamic input so that the interpreter doesn't interpret a + as a javascript command or a quotation mark as a command, etc so that I can display data on the page even if the user may have entered one of these symbols, etc. That might help explain it better. — linus72982
– linus72982, Commented Apr 21, 2011 at 3:01
It's pulling the data just fine, there are no problems in the PHP, I'm just trying to tell javascript NOT to interpret any programming in a part of the script, I just want it, fully, in the textarea, no trying to interpret anything as scripting. — linus72982
– linus72982, Commented Apr 21, 2011 at 3:02
I guess I don't see how javascript is going to parse the text of a textarea — mcgrailm
– mcgrailm, Commented Apr 21, 2011 at 3:03

brianpeiris · Accepted Answer · 2011-04-21 03:31:27Z

1

Seems like you would need to escape HTML and single quotes. You can use PHP's built-in htmlentities function to do this, like so:

<?php echo htmlentities($userInfo['signature'], ENT_QUOTES); ?>

answered Apr 21, 2011 at 3:31

brianpeiris

10.8k1 gold badge34 silver badges46 bronze badges

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

1 Comment

linus72982 Over a year ago

I was thinking about using javascript functions like escape but then realized it doesn't escape javascript operators and the like. Then I thought about using addslashes and realized it might not escape everything that javascript might want to parse - htmlentities will probably work, thanks.

RobG · Accepted Answer · 2011-04-21 03:33:38Z

1

You need to convert any special characters to HTML entities at the server, by the time it's at the client it's too late. e.g.:

"foo <= bar"

becomes

&ldquo;foo &le; bar&rdquo;

and then when inserted in the string becomes:

"&ldquo;foo &le; bar&rdquo;"

rather than

""foo <= bar""

which clearly will mess with the script at the client. You could also use unicode escape sequences.

answered Apr 21, 2011 at 3:33

RobG

148k32 gold badges180 silver badges216 bronze badges

Comments

Chris Buck · Accepted Answer · 2011-04-21 05:11:01Z

If you need it done on the client for other reasons, this works (tested):

<textarea id=text></textarea>
<script type="text/javascript">
var signature = "<div>Not actually a div.</div>";
document.getElementById('text').value=signature;

So, something like this will work (untested):

else if (theChange == 'signature') {
    document.getElementById('userPanelChangeBox').innerHTML = 
    '<form action="tinUser_processor.php" method="post">'
    +'Signatures cannot contain any markup (HTML, BBCode, etc) or styling and can only be 4 lines<br />'
    +'Enter your new signature:<br /><br />'
    +'<textarea name="textChange" class="signatureChangeText" cols="100" rows="4">'
    +'</textarea><br /><br />'
    +'<input type="hidden" value="signature" name="typeChange" />'
    +'<input type="submit" value="Submit Change" name="submitter" /></form>';
    document.getElementById('userPanelChangeBox').textChange.value='<?php echo $userInfo['signature']; ?>';
    }

Collectives™ on Stack Overflow

Insert text into a textarea using javascript without javascript parsing the text

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related