...

View Full Version : saved contents from an input box - can this be done with a textbox?



tpeck
01-12-2007, 12:17 PM
This question is really a yes/no question.

This piece of code performs a job which makes the contents of an input box available anywhere else in a website. It's done with cookies.


<!--
function createCookie(name,whatval,days)
{
if(whatval != '')
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"val="+whatval+expires+"; path=/";
}
}

function readCookie(name)
{
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

window.onload = function()
{
var theInputs = document.getElementsByTagName('input');
for(var i = 0; i < theInputs.length; i++)
{
if(theInputs[i].type == 'text')
{
theInputs[i].onkeyup = function()
{
createCookie(this.name,this.value,9999);
}
}
if(readCookie(theInputs[i].name+'val') != null)
{
theInputs[i].value = readCookie(theInputs[i].name+'val');
}
}
}

Anyone who understand this code will know that calling the external file in the header and placing an appropriately named input box on another page will make visible the named variable saved elsewhere and stored as a cookie.

...for instance: <input type="text" name="r98"> will reveal the contents of the input box named "r98" on another page.

It works brilliantly, and the magic is in the onload function.

My question is can the same be achieved with a TEXTBOX instead of an input box? If so, how?

rubenbuhr
01-12-2007, 01:28 PM
Yes. Be sure to escape the textarea value and unescape on read else the line breaks will be lost. Also, be aware that cookies can only hold so many characters so, no lengthy essays please.

tpeck
01-13-2007, 12:31 AM
Good, now I know it can be done, ...but how?

My demo here shows what I would like to have happen, but I guess it means rewriting the onload function (with your other provisos).

http://aapress.com.au/demo/input/page1.html

My skills fall far short I'm afraid.

Any help would be welcome. Thanks.

david_kw
01-13-2007, 12:47 AM
I didn't look too closely but I did see for the textarea you are searching for inputs.

var theInputs = document.getElementsByTagName('input');

you need to change that to something like

var theInputs = document.getElementsByTagName('textarea');

to put it in your array. There may be other problems but that is one I saw at a quick glance.

david_kw

tpeck
01-13-2007, 12:54 AM
Thanks. I actually did try that before - it seemed the logical thing to do, but it doesn't do the trick.

A textarea box must differ in some way to an input box - at least in this regard.

The other thing, of course, is that I want to be able to do both an input box and a textarea box on the same page.

david_kw
01-13-2007, 01:15 AM
So you tried doing a second loop in your onload that might look something like this? (changed input to textarea and commented out the type='text' part)



var theInputs = document.getElementsByTagName('textarea');
for(var i = 0; i < theInputs.length; i++)
{
// if(theInputs[i].type == 'text')
// {
theInputs[i].onkeyup = function()
{
createCookie(this.name,this.value,9999);
}
// }
if(readCookie(theInputs[i].name+'val') != null)
{
theInputs[i].value = readCookie(theInputs[i].name+'val');
}
}


david_kw

tpeck
01-13-2007, 01:28 AM
OK - I tried doing what you said...

Here is the demo: http://aapress.com.au/demo/input/page2.html

Still it doesn't work.

The code I tried was:


window.onload = function()
{
var theInputs1 = document.getElementsByTagName('input');
for(var i = 0; i < theInputs1.length; i++)
{
if(theInputs1[i].type == 'text')
{
theInputs1[i].onkeyup = function()
{
createCookie(this.name,this.value,9999);
}
}
if(readCookie(theInputs1[i].name+'val') != null)
{
theInputs1[i].value = readCookie(theInputs1[i].name+'val');
}
}
}

var theInputs2 = document.getElementsByTagName('textarea');
for(var i = 0; i < theInputs2.length; i++)
{
// if(theInputs[i].type == 'text')
// {
theInputs2[i].onkeyup = function()
{
createCookie(this.name,this.value,9999);
}
// }
if(readCookie(theInputs2[i].name+'val') != null)
{
theInputs2[i].value = readCookie(theInputs2[i].name+'val');
}
}


I figured I had to change the variable names, right?

david_kw
01-13-2007, 01:39 AM
Yes I think you have to change variable names. It doesn't look like the loop is in your onload function though. Check the curly braces.

david_kw

By the way, I have to head out for the night. Good luck.

tpeck
01-13-2007, 01:51 AM
Good grief! It works! Thanks again.

(I've updated the demo.)

Now all I have to do is figure out how to deal with the case where the textbox input contains line spaces - as rubenbuhr pointed out. ("Be sure to escape the textarea value and unescape on read else the line breaks will be lost.")

Do you know what rubenbuhr meant - in terms of coding? I understand the need to do it but have no idea how.

whizard
01-13-2007, 02:38 AM
maybe this:
http://www.barelyfitz.com/projects/encoder/
will help?

HTH
Dan

tpeck
01-14-2007, 02:26 PM
I still have a problem with this textarea box.

You can see from my demo that the input box and the textarea box are not saving independent values. But I've renamed the variables. Is it because they are using the same cookie? If so I am at a complete loss as to what to do.

http://aapress.com.au/demo/input/page1.html

Any ideas would be appreciated.

rubenbuhr
01-14-2007, 05:11 PM
That looks neat. I work with a lot of cookies locally on my machine to keep track of music tracks I play, links I want to save without bookmarking, I have a textarea on my start page to write notes on, over 30 IDs to log into various web sites. I use a cookie to serve up a new ID everyday so I'm sure not to allow any of those IDs to lapse from lack of use at hotmail. So, I have a single globalCookie.js that use on different pages. Short of writing your pages for you, you can have a look at what I've done...(with help from others)



var expDate = new Date();

function setCookie(isName,isValue,daysExpire){
expDate = new Date();
if(daysExpire){ expDate.setTime(expDate.getTime()+(86400000*daysExpire)); }
else{expDate.setTime(expDate.getTime()+24*60*60*1000*365);}
document.cookie = isName+"="+escape(isValue)+";expires="+expDate.toGMTString();
}

function getCookie(isName){
var cookieStr = document.cookie;
var startSlice = cookieStr.indexOf(isName+"=");

if (startSlice == -1){return false}
var endSlice = cookieStr.indexOf(";",startSlice+1);
if (endSlice == -1){endSlice = cookieStr.length}
var isData = cookieStr.substring(startSlice,endSlice);
var isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return unescape(isValue);
}

function dispCookie(isName){
var nValue = getCookie(isName);
return (nValue);


}

function deleteCookie(isName){

if (getCookie(isName)){document.cookie = isName + "="+
"; expires=Thu, 01-Jan-70 00:00:01 GMT";}
}

tpeck
01-15-2007, 12:46 AM
OK. Thanks. I have attempted to incorporate your cookie functions into my (new) demo:

http://aapress.com.au/demo/input2/page1.html

I think I've altered all the names correctly, but it isn't saving anything, so I guess not.

If I can get it to save, do you think it will distinguish the contents of the input boxes and the textarea boxes?

rubenbuhr
01-15-2007, 02:03 AM
I am of no help anymore as I have never had a reason to fetch cookies created by a different page. You had something working, I hope you didn't trash what you had.

tpeck
01-16-2007, 03:10 PM
Never mind - I want to use your cookie code - it includes the escape stuff.

But I can't get it working yet.

If I take it one step at a time i hope to get there.

Basically, I need this demo to work and give separate displays for an input box and a textarea box.

http://aapress.com.au/demo/input2/page1.html

First, I need to get the cookie set using rubenbuhr's code. I've followed the same logic as the other code. Why doesn't it save anything?

Can anyone see my stupid error?


function setCookie(isName,isValue,daysExpire){
expDate = new Date();
if(daysExpire){ expDate.setTime(expDate.getTime()+(86400000*daysExpire)); }
else{expDate.setTime(expDate.getTime()+24*60*60*1000*365);}
document.cookie = isName+"="+escape(isValue)+";expires="+expDate.toGMTString();
}

function getCookie(isName){
var cookieStr = document.cookie;
var startSlice = cookieStr.indexOf(isName+"=");

if (startSlice == -1){return false}
var endSlice = cookieStr.indexOf(";",startSlice+1);
if (endSlice == -1){endSlice = cookieStr.length}
var isData = cookieStr.substring(startSlice,endSlice);
var isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return unescape(isValue);
}

function dispCookie(isName){
var nValue = getCookie(isName);
return (nValue);


}

function deleteCookie(isName){

if (getCookie(isName)){document.cookie = isName + "="+
"; expires=Thu, 01-Jan-70 00:00:01 GMT";}
}


window.onload = function()
{
var theInputs1 = document.getElementsByTagName('input');
for(var i = 0; i < theInputs1.length; i++)
{
if(theInputs1[i].type == 'text')
{
theInputs1[i].onkeyup = function()
{
setCookie(this.isName,this.isValue,9999);
}
}
if(getCookie(theInputs1[i].isName) != null)
{
theInputs1[i].isValue = getCookie(theInputs1[i].isName);
}
}

}


If so, then I'll fix it, but I still have the input displays borrowing from each other. They must be separate. Well, I have hundreds of them, so if I can get two to work, the rest will follow!

rubenbuhr
01-17-2007, 03:36 AM
For some reason I couldn't get it to work either but, when I save an HTML with IE as "WebPage (complete)" in the drop down menu, IE smartens up my code.
So, here you go....CookieDemo (http://home.centurytel.net/abcd/cookieDemo/two.html)
There is no index file in the directory so grab up the 3 files while they're hot

tpeck
01-17-2007, 05:11 AM
Thanks - that is very interesting. I will study what you did and try to work out how it happens. it is similar to the effect I am using.

AND I FIGURED IT OUT!

http://aapress.com.au/demo/input2/page1.html

It was to do with the "id=" which should have been "name=", and the IsName and IsValue variables didn't need to be substituted for the instances of ".name" and ".value".

Here is the code:

Thanks everyone who lent a hand!


function setCookie(isName,isValue,daysExpire){
expDate = new Date();
if(daysExpire){ expDate.setTime(expDate.getTime()+(86400000*daysExpire)); }
else{expDate.setTime(expDate.getTime()+24*60*60*1000*365);}
document.cookie = isName+"="+escape(isValue)+";expires="+expDate.toGMTString();
}

function getCookie(isName){
var cookieStr = document.cookie;
var startSlice = cookieStr.indexOf(isName+"=");

if (startSlice == -1){return false}
var endSlice = cookieStr.indexOf(";",startSlice+1);
if (endSlice == -1){endSlice = cookieStr.length}
var isData = cookieStr.substring(startSlice,endSlice);
var isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return unescape(isValue);
}

function dispCookie(isName){
var nValue = getCookie(isName);
return (nValue);


}

function deleteCookie(isName){

if (getCookie(isName)){document.cookie = isName + "="+
"; expires=Thu, 01-Jan-70 00:00:01 GMT";}
}

window.onload = function()
{
var theInputs1 = document.getElementsByTagName('input');
for(var i = 0; i < theInputs1.length; i++)
{
if(theInputs1[i].type == 'text')
{
theInputs1[i].onkeyup = function()
{
setCookie(this.name,this.value,9999);
}
}
if(getCookie(theInputs1[i].name) != null)
{
theInputs1[i].value = getCookie(theInputs1[i].name);
}
}

var theInputs2 = document.getElementsByTagName('textarea');
for(var i = 0; i < theInputs2.length; i++)
{
theInputs2[i].onkeyup = function()
{
setCookie(this.name,this.value,9999);
}
if(getCookie(theInputs2[i].name) != null)
{
theInputs2[i].value = getCookie(theInputs2[i].name);
}
}
}
// End -->
</script>

tpeck
01-17-2007, 05:52 AM
I've noticed yet another small problem - the default "value" of an input or textarea box is the word "false".

How do I make that go away? And display a space or better still, nothing.

rubenbuhr
01-17-2007, 09:43 AM
It's not a default value, it just means the cookie doesn't exist.
You'll have to devise an if/else to check for it.

tpeck
01-17-2007, 10:52 AM
Oh. Well I found something that looks like this:


<script language="JavaScript">
if (document.cookie && document.cookie != null){
var client_name1 = document.cookie;
var client_name2 = client_name1.split("=");
var client_name = unescape(client_name2[1]);
}

else {client_name = "stub";}

It's supposed to detect if a cookie exists.

But adding this to your code doesn't stop the "false" from appearing.

I think I'm drowning again. All I want is a space or nothing to appear and, I guess, I could add a link to kill the cookie's previous inputs. That bit I think I can manage, but the "false" killer, is weird. I've never seen it appear before.

Am I on the right track?

rubenbuhr
01-17-2007, 11:17 AM
How about...
if (dispCookie(isName)=='false'){dispCookie(isName)='blank'}

tpeck
01-17-2007, 01:49 PM
The best I can come up with is:

(It doesn't error, but it doesn't get rid of the "false" either...)


function readCookie(name)
{
var cookieStr = document.cookie;
var startSlice = cookieStr.indexOf(name+"=");
if (startSlice == -1){return false}
var endSlice = cookieStr.indexOf(";",startSlice+1);
if (endSlice == -1){endSlice = cookieStr.length}
var isData = cookieStr.substring(startSlice,endSlice);
var isValue = isData.substring(isData.indexOf("=")+1,isData.length);
if (isValue == 'false')
{
var isValue = 'blank'
}
return unescape(isValue);
}

It is based on your suggestion, but I am using a combination of your code and my original which does not include dispCookie():


function createCookie(name,whatval,days)
{
if(whatval != '')
{
if (days)
{
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else var expires = "";
document.cookie = name+"="+whatval+expires+"; path=/";
}
}

function readCookie(name)
{
var cookieStr = document.cookie;
var startSlice = cookieStr.indexOf(name+"=");
if (startSlice == -1){return false}
var endSlice = cookieStr.indexOf(";",startSlice+1);
if (endSlice == -1){endSlice = cookieStr.length}
var isData = cookieStr.substring(startSlice,endSlice);
var isValue = isData.substring(isData.indexOf("=")+1,isData.length);
if (isValue == 'false')
{
var isValue = 'blank'
}
return unescape(isValue);
}

function onloadFn()
{
var theInputs = document.getElementsByTagName('input');
for(var i = 0; i < theInputs.length; i++)
{
if(theInputs[i].type == 'text')
{
theInputs[i].onkeyup = function()
{
createCookie(this.name,this.value,9999);
}
}
if(readCookie(theInputs[i].name) != null)
{
theInputs[i].value = readCookie(theInputs[i].name);
}
}
var theInputs2 = document.getElementsByTagName('textarea');
for(var i = 0; i < theInputs2.length; i++)
{
theInputs2[i].onkeyup = function()
{
createCookie(this.name,this.value,9999);
}
if(readCookie(theInputs2[i].name) != null)
{
theInputs2[i].value = readCookie(theInputs2[i].name);
}
}
}

window.onload = function () {
if (ie||ns4||ns6) onad();
onloadFn()
}

I realise you have done more than enough to help, rubenbuhr!

(The bit in red is just a call to another routine which works fine.)

david_kw
01-17-2007, 04:50 PM
The problem is here.

See here that getCookie() is returning boolean false when startSlice == -1



function getCookie(isName){
var cookieStr = document.cookie;
var startSlice = cookieStr.indexOf(isName+"=");

if (startSlice == -1){return false}
var endSlice = cookieStr.indexOf(";",startSlice+1);
if (endSlice == -1){endSlice = cookieStr.length}
var isData = cookieStr.substring(startSlice,endSlice);
var isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return unescape(isValue);
}



But here the code checks to see if getCookie is not equal to null. So if the value returned is false that still passes the check. And then the boolean false value is assigned to theInputs1[i].value in the next line.



if(getCookie(theInputs1[i].name) != null)
{
theInputs1[i].value = getCookie(theInputs1[i].name);
}
}


My suggestion is try returning null instead in the getCookie function and see if it helps.



if (startSlice == -1){return null;}


david_kw

tpeck
01-17-2007, 05:48 PM
Thanks David. I should have noticed that word 'false' there in the code!

It works well if I write:


function readCookie(name)
{
var cookieStr = document.cookie;
var startSlice = cookieStr.indexOf(name+"=");
if (startSlice == -1){return '';}
var endSlice = cookieStr.indexOf(";",startSlice+1);
if (endSlice == -1){endSlice = cookieStr.length}
var isData = cookieStr.substring(startSlice,endSlice);
var isValue = isData.substring(isData.indexOf("=")+1,isData.length);
return unescape(isValue);
}

So there!

Demo: http://aapress.com.au/demo/input2/page1.html

It also now observes 'line enters' in the textbox.

******************************************

The only last remaining issue is not so important really, but to do a professional job I feel obliged to try to delete a single input in the best possible way. But the only way to do this completely is to highlight the entire input and press space. It's cheating, because you are really writing a space.

But if you backspace (the most logical thing to do) the result can vary:

1. do it character by character, and not too swiftly, the first letter will remain regardless of your deleting it.
2. do it very swiftly and the entire input still remains!

Obviously, it has to do with that "onkeyup = function()" business, which I just love! (Although that alternative method of rubenbuhr's I can put to good use elsewhere.)

I don't suppose anyone can propose a clever reset? (not deleting the entire document.cookie!)

Backspacing is really most logical, but somehow I need to flag the last character delete and return the situation to David's {return '';}

I'll try tomorrow, but I'm not so confident.

david_kw
01-17-2007, 06:04 PM
Is there some reason to do onkeyup instead of onchange? Or perhaps doing both if necessary?

david_kw

tpeck
01-17-2007, 06:30 PM
If I change onkeyup to onchange, the backspace delete doesn't work at all - only highlight and replace with space.

The other boring thing is it takes the online browser ages to reflect any changes to the pages. Offline its instant. Strange.

tpeck
01-18-2007, 06:32 AM
I'm trying to delete the cookies now.

I understand the process - up to a point: set a cookie to a date in the past, but it doesn't work perfectly. One letter is left behind!

I added some simple eraseCookie code:


function eraseCookie(name) {
createCookie(name,"",-1);
}


...and I created a click here link:

<a href="#" onclick="eraseCookie('wrd1')">click here</a>

I have two cookies - "wrd1" and "wrd2".

But I'm just trying to get rid of the "wrd1" cookie first.

Demo: http://aapress.com.au/demo/input2/page1.html

What am I not doing right?

I have 119 cookies in my project and so I figure I will have to write a long list of erases that happen when I click the link, but I can't even do one!

david_kw
01-18-2007, 04:53 PM
Here is a test page for cookies that I put together from some code someone posted on these boards. Maybe looking at it will help.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Junque</title>
<script type="text/javascript">
/* <![CDATA[ */
function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}

function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) break;
}
return null;
}

function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (argc > 2) ? argv[2] : null;
var path = (argc > 3) ? argv[3] : null;
var domain = (argc > 4) ? argv[4] : null;
var secure = (argc > 5) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}

function DeleteCookie (name) {
var exp = new Date();
exp.setTime (exp.getTime() - 1);
// This cookie is history
var cval = GetCookie (name);
document.cookie = name + "=" + cval + "; expires=" + exp.toGMTString();
}

function doIt(s) {
var adiv = document.getElementById("adiv");
adiv.innerHTML = s;
}
/* ]]> */
</script>
</head>
<body>
<div>
<button onclick="SetCookie('test', 'cookie value'); doIt('Cookie set to \'cookie value\'.');">Set Cookie</button>
<button onclick="doIt('Cookie is: \'' + GetCookie('test') + '\'');">Get Cookie</button>
<button onclick="DeleteCookie('test'); doIt('Cookie deleted.');">Delete Cookie</button>
<br />
<div id="adiv"> </div>
</div>
</body>
</html>


david_kw



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum