Coding Tips (JavaScript/CSS/VBA/Win32)
Useful code snippets, tips and some Windows applications

Free local files search with HTML Scanner

A Script to remember values typed into a text box

HTTP cookies can be used both for server-side and client-side programming. There are many ways to use cookies in Javascript. In this short tutorial we will concentrate on the client-side. The task is to build a script that will remember values users type in a text box and display them next time the users access the page.

Let's say we have a form with an input box "project" and a submit button. We want to capture the values entered by the user and save them for later use. Cookies seem to be an ideal solution to this problem. No server-side programming or maintenance.

A working example is located here .

We'll need two functions to read and set cookies. They are pretty much standard and can be easily found on the web.

Let's start with a function that sets the cookie. 

function setCookie (name, value, expires,
		path, domain, secure) {
     document.cookie =
      name + "="
      + escape(value)
      + ((expires) ? "; expires="
      + expires.toGMTString() : "")
      + ((path) ? "; path=" + path : "")
      + ((domain) ? "; domain=" + domain : "")
      + ((secure) ? "; secure" : "");
}

The parameters to the function are self-explanatory:

name is the cookie name we are going to use
value is the cookie's value
expires - a date that the cookie will expire.

The path sets the top level directory from which a cookie can be read.
Set the path of a cookie to the top-level directory of your Web pages, and the cookie is readable by all your Web pages.

To get a cookie value we'll use the following function:

 function getCookie(name) {
  // break cookie into array of bites
   var bites = document.cookie.split("; ");
    for (var i=0; i < bites.length; i++) {
     // break into name and value 
      nextbite = bites[i].split("=");
      // if name matches 
      if (nextbite[0] == name)
      // return value 
       return unescape(nextbite[1]);
    }
    return null;
 }

Let's write a function that would add values to the existing cookie. 2 arguments will be passed to the function: cookieName and formField.

First, let's get the value typed by the user:

var field = eval ("document.forms[0]."+ formField);
var txtVal =field.value;

Now, we'll set the expiry date to 30 days from today.:

var expires = new Date();
expires.setDate(expires.getDate() + 30);

Get the contents of the cookie using the getCookie function:

var contents= getCookie(cookieName);

Add the new value typed by the user to the existing cookie contents.

if(contents != null && contents.indexOf(txtVal)<0)
contents+="."+txtVal;
else if(contents == null)
contents = txtVal;

We chose to separate values by a period. You can use any other separators.

The last thing to do is to send the new cookie contents to our setCookie function:

setCookie(cookieName, contents, expires,"/");

Here is the full listing of the function: 

function addString(cookieName, formField){
	var field = eval ("document.forms[0]."+ formField);
	var txtVal =field.value;
	var expires = new Date();
	expires.setDate(expires.getDate() + 30);
	var contents= getCookie(cookieName);
	if(contents != null && contents.indexOf(txtVal)<0)
		contents+="."+txtVal;
	else if(contents == null)
		contents = txtVal;

	setCookie(cookieName, contents, expires,"/");
}

We'll call this function from the onSubmit event of the form, like this:
<form onSubmit='addString ("example","txt1")'>
Now, the only thing to do is to write the contents of the cookie on the HTML page.
Here is the function that does it: 
function writeCookieValues (val) {
	if(val!= null && val.length>0){
		var str = new String(val);
 //split the resulting array by a separator
 //used earlier in the addString function
	var aPr = str.split(".");
	for(var i=0; i < aPr.length; i++)
		document.write(aPr [i]+"<br>");
	}
}
Use it like this:
<script language='JavaScript'> writeCookieValues (getCookie("example")); </script>