Storing Form Information with Cookies, page 2
Several functions are used to create the personalized message for users. First, there is a generic function called setCookie, for storing cookies. This function has a lot of options that we will not use, such as an option for secure transmission.
//name - name of the cookie
// value - value of the cookie
// [expires] - expiration date of the cookie (defaults to end of current session)
// [path] - path for which the cookie is valid (defaults to path of calling document)
// [domain] - domain for which the cookie is valid (defaults to domain of calling document)
// [secure] - Boolean value indicating if the cookie transmission requires a secure transmission
// * an argument defaults when it is assigned null as a placeholder
// * a null placeholder is not required for trailing omitted arguments
function setCookie(name, value, expires, path, domain, secure) {
var curCookie = name + "=" + escape(value) +
((expires) ? "; expires=" + expires.toGMTString()
: "") +
((path) ? "; path=" + path : "") +
((domain) ? "; domain=" + domain : "") +
((secure) ? "; secure" : "");
document.cookie = curCookie;
}
We use this function to set several cookies, one for each piece of information that we obtain on registration. When the user pushes the button that says "register," we call the following JavaScript function.
function registerUser(form){
setCookie("firstname",form.firstname.value);
setCookie("lastname",form.lastname.value);
setCookie("state",form.state.value);
setCookie("gender","Female");
if (form.gender[0].checked) setCookie("gender", "Male");
setCookie("newsletter","no");
if (form.newsletter.checked)
setCookie("newsletter","yes");
form.comments.value = 'Hello, ' + getCookie("firstname") ;
}
Let us go over this code slowly. It starts with
function registerUser(form)
This says that we are creating a function called registerUser that takes as input the values of a form.
Next, we use the setCookie function, with its first two arguments. The first argument is the name we give to the cookie, and the second argument is the value we assign to the cookie. In the statement,
setCookie("firstname",form.firstname.value);
we name the cookie "firstname" and we set it to equal form.firstname.value, which is the entry that the user types into the form for their first name.
We do the same thing for the last name and for the state. However, when we get to the point in the form where the user selects either male or female, we have to operate on the radio button. We assume that the user is a female unless they check male. Then we test this. We say,
if (form.gender[0].checked) setCookie("gender", "Male");
There are two values for form.gender, and they are subscripted in the computer as 0 and 1. The first one, form.gender[0], will be checked if the user selects "Male" on the form. If it is checked, then we re-set the "gender" cookie to "Male."
We perform a similar operation on the newsletter subscription. First, we set the "newsletter" cookie to "no." Then, we test to see whether the newsletter box was checked on the form. If it was, then we change the "newsletter" cookie to "yes."
What we have done is create a small document on the user's computer. This is called the cookie file. It has all of the information that user put in when they registered. Now, this information is available to our web server on every page that the user visits, until the user shuts down their browser. (We could save the information for longer--if we change the expiration date of the cookie).
To process the cookie, we use a generic getCookie() function and a specific function to produce output. The generic getCookie() function looks like this:
/* name - name of the desired cookie
return string containing value of specified cookie
or null if cookie does not exist */
function getCookie(name) {
var dc = document.cookie;
var prefix = name + "=";
var begin = dc.indexOf("; " + prefix);
if (begin == -1) {
begin = dc.indexOf(prefix);
if (begin != 0) return null;
} else
begin += 2;
var end = document.cookie.indexOf(";", begin);
if (end == -1)
end = dc.length;
return unescape(dc.substring(begin + prefix.length, end));
}
For now, let us just assume that this code works, without knowing how. It allows us to unpack a cookie, as long as we know the name of the cookie we are unpacking.
Here is the code that I wrote to generate the message at the top of this page:
function writeUserMessage(){
genderString = "Ms.";
if (getCookie("gender") == "Male")
genderString = "Mr."
newsletterString = "Too bad you are not interested in our newsletter.";
if (getCookie("newsletter") == "yes")
newsletterString = "Thanks for subscribing to our newsletter.";
document.write('<p><div class = "boxcenter"><p>Hello, '
+ genderString
+ ' ' + getCookie("lastname") + '. Mind if I call you '
+ getCookie("firstname") + '? How is the weather today in ' +
getCookie("state") + '? </p><p>' + newsletterString + '</p></div>');
}
Some remarks about the code:
- We need to decide whether to call the user "Mr." or "Ms." We start by setting a variable that we call genderString equal to "Ms." We change this if the cookie for gender is "Male," which should happen if the person checked "Male" on the registration form.
- We need to decide whether or not to thank the user for subscribing to our newsletter. We start by setting a variable that we call newsletterString to equal a text message that we are sorry that the user did not subscribe. However, we change this if the cookie for newsletter subscription is "yes."
- Finally, we write the message to the user in the document.write() statement. What you can put inside the parentheses are text variables, such as newsletterString, as well as free-form text, inside single quotes. (You can use double quotes, but that is not a good habit, because it gets confused with the double quotes that are used by HTML.)
Page created by Arnold Kling. Last Modified October 30, 2001.