Welcome to WebmasterWorld Guest from 54.162.151.77

Forum Moderators: coopster & jatar k

Message Too Old, No Replies

User input to a hidden tag, how to encode?

     
5:10 am on Aug 24, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1116
votes: 109


This feels like it should be common sense to me, but it's been awhile since I've been here so I can't quite remember.

First, when someone is entering in a contenteditable, I'm saving it to a cookie every 30 seconds for a backup. I might change that to use Ajax and save to MySQL later, but for now it's a cookie.

Then when they load the page, I read whatever they had typed to a variable. It can be full of HTML tags, quotes, etc. So:

if (!$comment && $_COOKIE[$saveName])
$comment = $_COOKIE[$saveName];


Then later in the PHP, I set this as the value to a hidden tag, and each time the user blurs their contenteditable it updates that hidden tag (via Javascript) so that I can send it to the processing script when the user submits. Eg:

<input type="hidden" name="commentVal" value="$comment">


But the question is, how should I encode $comment before using it in the hidden tag? addslashes(), urlencode(), htmlentities()... other?
10:25 am on Aug 24, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:983
votes: 234


I think the proper function to use is "htmlspecialchars" : [php.net...]

Be careful while using cookie to store user input, cookie length is limited to 4096 bytes (including the time stamp, domain and parameters). Usually, with contenteditable, when the user click on the submit button, a piece of javascript will retrieve the input, and store it into a hidden field.
6:55 pm on Aug 24, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1116
votes: 109


I think the proper function to use is "htmlspecialchars" : [php.net...]

Haha, of course it was a 4th one I hadn't considered! lol Thanks :-)


Be careful while using cookie to store user input, cookie length is limited to 4096 bytes (including the time stamp, domain and parameters). Usually, with contenteditable, when the user click on the submit button, a piece of javascript will retrieve the input, and store it into a hidden field.

Yeah, that size limit was my concern, too. I'm auto-saving the data so that if they leave and come back for whatever reason then they won't lose everything they've tied... it's not a common issue, but even I've accidentally closed the tab, had a browser just close for no apparent reason. And remember a few years ago when Adsense banners were causing unexpected redirects?

Saving it to a cookie is quick and easy, but I'm probably going to have to build a more complex system that can save it to MySQL.
9:10 pm on Aug 24, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:Sept 25, 2005
posts:2091
votes: 370


that size limit was my concern, too

Maybe use LocalStorage when the client supports it.
6:48 am on Aug 27, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member Top Contributors Of The Month

joined:Mar 15, 2013
posts: 1116
votes: 109


That's awesome, Rob, thanks! I didn't even know that existed. It looks like it's supported by IE8+ and virtually all versions of Chrome and FF, but with no real limit on the data that can be stored.

Here's the autosave code that I'm using now; it uses LocalStorage if it can, or sets a cookie if the browser doesn't support LocalStorage:

// Get data if it's already been saved
// variable "saveName" is created on the parent page
var comment;
if (typeof(Storage) !== 'undefined')
comment = localStorage.getItem(saveName);

else
// getCookie is a function I wrote several years ago
comment = getCookie(saveName);

if (comment) {
// #comment is the contenteditable; if the browser doesn't support it then
// #commentText is a textarea backup
if ($('#comment').length)
$('#comment').html(comment);

else
$('#commentText').val(comment);
}

setInterval(function() {
var commentVal;

if ($('#comment').html())
commentVal = $('#comment').html();

else if ($('#commentText').val())
commentVal = $('#commentText').val();

if (commentVal) {
if (typeof(Storage) !== 'undefined')
localStorage.setItem(saveName, commentVal);

else
// setCookie is another function that I wrote a long time ago;
// the "1" sets it for 1 day
setCookie(saveName, commentVal, 1);

// #saved is on the parent page, just a DIV that says "Saved" and
// is set to style="display: none" by default
$('#saved').show()
.delay(750)
.fadeOut(1500);
}
}, 5000);


After the user successfully submits the post, I use this to delete it:

localStorage.removeItem(saveName);


Also, going back to the subject of the thread... I realized that I didn't need to use a hidden input for the contenteditable, after all. Instead, I'm using the textarea #commentText.

It was simple, really; I set the display of the textarea to block and the contenteditable to hidden, then I test to see if the browser supports contenteditable. If so then I hide the textarea and show the contenteditable instead. Then, when I blur the contenteditable then I just set $('#commentText').val($('#comment').html())... no need to encode anything :-)
12:09 pm on Aug 27, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Nov 13, 2016
posts:983
votes: 234


I also didn't know about LocalStorage , thank you robzilla. And thank you csdude55 for idea of storing a copy of what a user is typing, that's good idea, I'll work on this too.