Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat.

free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class">

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

Advanced JavaScript Lesson 27:
Passing Form Data With A Cookie

Code Tutorials

Site Development

Downloads

Help!!

Home

The Form

In this tutorial, we'll be entering data into a form on one page, writing the data to a cookie, and reading it on another page. This is how JavaScript passes data from one page to another. Here's an example.

You should already know how to make the form elements with HTML. I've named my form "form1" and the boxes "firstnamebox", "lastnamebox", and "flowerbox" respectively. I use JavaScript's "document.form_name.box_name.value" to assign each box's entry to a variable. The variables I called "name", "lastname", and "flower" respectively:

function process(){
var name = document.form1.firstnamebox.value;
var lastname = document.form1.lastnamebox.value;
var flower = document.form1.flowerbox.value;
}

With these preliminaries out of the way, it's time to make a string using these variables and writing it to a cookie.

Making The String

When writing a string with variables to a cookie, it's generally best to assign the overall string to a variable and then set "document.cookie" to the variable. This is as opposed to just building the string in "document.cookie's" value itself. This saves a lot of headaches and makes debugging easier.

To begin the string, think up a variable name and start building the string adding in the variables as needed:

function process(){
var name = document.form1.firstnamebox.value;
var lastname = document.form1.lastnamebox.value;
var flower = document.form1.flowerbox.value;

var stuff_for_cookie = "Hi, " + name + " " + lastname + ". Your favorite flower is " + flower + ".";
}

You should recognize what I've done above. It's just making a long string out of some constant text and the variables from the form data.

Testing The String

Making strings often leads to minor errors and long strings with lots of variables often need a little debugging before being used. The best way I've found to test strings before writing them to a cookie is to use an alert() box:

Now I can see in the alert() box exactly what will be written on the cookie. I can debug the string as needed before writing the cookie.

Writing The Cookie

With your string ready to go just remove the alert() box used for testing and add "document.cookie":

That's all there is to it. Just remember it's a good idea to assign the string to be written to the cookie to a variable, as opposed to directly assigning it to "document.cookie", and to test it out with an alert() box.

Reading The Cookie

The second page just reads the cookie with:

var cookie_stuff = unescape(document.cookie);

This "unescapes" the data, converting it back to regular text, and stores this in "cookie_stuff".

To display the string, just use "document.write()" in the second page's <body>:

document.write (cookie_stuff);

Now you can get data from one page, use it in a string, and present the string with dynamic data on any other page. Just read the cookie and assign the contents to a variable. Now use "document.write()" to display the variable with the cookie data.

Summary & Exercises

To begin passing form data to another page, you first have to set up a form or other system of gathering data. Next, you need to assign the data values to JavaScript variables.

Before writing your cookie, make a variable and assign it to the value of the string you want to write. Test and debug this string with an alert() box before writing it to a cookie.

The final stage of writing the cookie is to replace the alert() box with a "document.cookie" assignment. Depending on the contents of your final string, you may or may not have to use "escape()". If in doubt or running into odd characters, use "escape()".

A cookie made with the above method is read just like the first cookie we made. Just make up a variable and assign it to "document.cookie". Display the data by using "document.write()".

Cookies often involve complex strings. Make a bigger form with a wider variety of data. The emphasis here is on getting a complex cookie written. The next tutorial will show show us how to parse and break up cookie data on the page reading the cookie.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index