One of the big questions people have is how they can carry information across pages. User A makes a choice on one page and then goes to another. How can I “remember” what his or her choice was? Well, the best way is to set a cookie. The cookie is placed right on the user’s computer and can be recalled again and again. I have a tutorial on doing just that right here.
The problem is that many people are scared of cookies. They don’t like them and feel they’re an invasion of their privacy. OK, fine. So now how do I get information across pages? Well, you could do it through one page spawning another, then another, then another. That would allow JavaScript variables to be transferred, but that opens a lot of windows.
To attempt to solve this little dilemma, I offer this down and dirty JavaScript method. Try this:
How It Works
Let me start by showing you the code that made the small form just above:
<FORM METHOD=”LINK” ACTION=”jspass2.html”>
Type your first name: <INPUT TYPE=”text” NAME=”FirstName”>
Type your last name: <INPUT TYPE=”text” NAME=”LastName”>
<INPUT TYPE=”submit” VALUE=”Click and See”>
</FORM>
Look first at the main FORM tag. The METHOD is set to LINK and the ACTION simply points toward another page. Nowhere in there does it say to send the user information anywhere. When you set up the form in this manner, what the user inputs is carried along in the URL.
The information is separated from the actual address by a question mark so it doesn’t harm the movement to another page. This little quirk of the browser allows us to go to a totally new page and carry the user’s input right along with us in the URL.
Pretty clever, no? Now all we have to do is find a method of extracting that information from the URL.
Limitations
Now might be a darn good time to discuss limitations to this process.
To begin with, the information is not saved after each surfing like it is with a cookie. In order for this to work, you must ensure the user moves in a linear fashion. Returning and backing up can harm the information being carried.
Next, the way I have this set up, you can only transfer two variables from page to page. You’ll see why in a moment.
Also, the method I have written here isn’t very friendly to spaces. If the user puts a space in either of their two text boxes, that space will be replaced by a plus sign. If you’re going to accept spaces, you’ll either have to live with that or write some extra code to eliminate it.
In addition, this is done with JavaScript so there are browsers that will not be able to play with it. This code was written in JavaScript 1.0, which was the standard when this article was written (2005), but it still works! As of June, 2008, the latest version of JavaScript is version 1.9. I saw a suggestion on doing this by setting the answers to an array. The array method allows for endless variables being passed, but older browsers would not be able to use it properly. My version allows for the most number of browsers to be able to play with the code but only uses two variables. You decide.
Get The First Name
OK, since you’ve obviously chosen my method (or else you probably wouldn’t be reading this far), let’s look at the code that grabs the first name. This code will be found on the page that the form above IS GOING TO.
<FORM NAME=”joe”>
<INPUT TYPE=”hidden” NAME=”burns”>
</FORM>
<SCRIPT LANGUAGE=”javascript”>
var locate = window.location
document.joe.burns.value = locate
var text = document.joe.burns.value
function delineate(str)
{
theleft = str.indexOf(“=”) + 1;
theright = str.lastIndexOf(“&”);
return(str.substring(theleft, theright));
}
document.write(“First Name is ” +delineate(text));
</SCRIPT>
I’m going to tell you what the hardest part of this process is. It kept me at bay for a good hour. I knew the easiest method to doing this was to use substring JavaScript commands and grab elements from the URL. I also knew I could grab the URL of a page simply by using the command window.location. Here, this is the URL of this page using the command:
No sweat right? There’s the text string. Just grab what you want. The problem is…that display is not a text string. It’s a property and that means it cannot be acted upon like a text string. Oh that drove me nuts. Once I figured out how to get it from a property to a text string I was fine. Let’s look at that part first.
OK, JavaScript friends, I know there are other ways of doing this, this is just how I like to do it. The code starts with this:
<FORM NAME=”joe”>
<INPUT TYPE=”hidden” NAME=”burns”>
</FORM>
You may remember that little blip of code for any number of forms you put together. It’s basically a text box, but it’s hidden. See how the type is “hidden”? That’s a great little trick to give yourself a place to store a value where no one can see it.
I figured if I take the property of the page’s location and put it in a text box, the property then becomes the value of that text box. When you grab the value from a text box it becomes…you guessed it…a text string. Let’s look at the Script:
var locate = window.location
document.joe.burns.value = locate
var text = document.joe.burns.value
That is the beginning blip of code that changes the location into a text string. The property “window.location” is given to a variable named “locate”. Then the value of locate is put into the text box represented by document.joe.burns.value. See that above? The NAME of the form itself is “joe”, the NAME or the hidden text box is “burns”. By adding “value” to the end of the hierarchy statement, I basically forced a value into the box.
The next line grabs that value right back out of the hidden text box and assigns the variable name “text” to it. The location of the page is now a text string and ready to be broken into parts.
Let’s say it looks like this:
In order to grab things out of this line of code, we need to look for key elements looking from left to right and later, right to left. In the example above, we want the text “Super” yanked out of this line of letters.
The keys would most likely be the equals sign (=) it’s the first one counting from the left. The ending key would be the ampersand (&). Again, it’s the first one looking from the left. That bookends the text, so let’s set up a JavaScript that knocks everything off including that equals sign, and keeps the next letters until an ampersand shows up. It’s not too hard.
function delineate(str)
{
theleft = str.indexOf(“=”) + 1;
theright = str.lastIndexOf(“&”);
return(str.substring(theleft, theright));
}
document.write(“First Name is ” +delineate(text));
First a function, named delineate(), is set up that will look for certain things.
The variable “theleft” is given the value of the first instance of an equals sign reading from the left. That’s what indexOf() does. Notice we add one because we don’t want the equals sign. Adding one skips it. Notice that each line is acting upon something called “str”. At the moment “str” has no value. We’ll pass it a value in the last line.
Next, the variable “theright” is given the value of looking for the first instance of & reading from the right. That’s what lastIndexOf() does.
So now we have our bookends set. Let’s grab the text. The next line returns the substring of what appears between the equals sign (theleft) and the & (theright). See that?
Finally, the value is grabbed using a document.writecommand. Remember that at this point, nothing has actually been done. The document.write statement actually triggers the function to run. But look! When the function is triggered to run, now it is being passed a new variable, “text”. That’s the text string of the location to be acted upon.
The return is the text Super.
Grab The Last Name
Grabbing the last name is a whole lot easier. If you look at the text string again, you’ll see we only need to set one point to look for. There’s nothing following the last name so if we read from the right and basically chop off everything including the second equal sign (from the right it’s the first), then we’ll be left with the last name. Here’s the code that did it.
var locate = window.location
document.joe.burns.value = locate
var text = document.joe.burns.value
function delineate2(str)
{
point = str.lastIndexOf(“=”);
return(str.substring(point+1,str.length));
}
document.write(“Last Name is ” +delineate2(text));
The code is very much the same in that it grabs the window.location and turns it into text. Where it differs is that the text string is only searching, from the right, for one item, the second equal sign.
The variable “point” is given the job of representing everything up to the second equal sign (first from the right – note I used lastIndexOf()).
The return is that point plus one, again to not include the equal sign, and then the length of the string – that’s everything that follows and that’s the last name.
A document.writestatement again triggers the function and passes the variable “text” to it.
Placing the Value
At this point in time you can place the value anywhere you want by using the document.write where ever you want. I have some text thrown in but that’s easily taken out. Remember to remove the plus sign if you take the text out. Getting the name into a text box is actually pretty easy. Here’s the code I used on the example page.
<FORM NAME=”bull”>
Last Name: <INPUT TYPE=”text” NAME=”bear”>
</FORM>
<SCRIPT LANGUAGE=”javascript”>
var zork = delineate2(text)
document.bull.bear.value = zork
</SCRIPT>
You might notice a big chunk of it from the other scripts. I created a box first. The box has to be first or the hierarchy statement won’t run. Error. The box is visible this time around. The value of the function is assigned to the variable “zork” and then zork is put into the text box. Pretty straightforward.
Just remember to change out the NAMEs of each element if you put more than one text box on a page. You also have to come up with a different variable name for the second text box. In other words you can’t have two zorks on the same page.
That’s That
And speaking of two zorks on the same page, remember the limitations of this. You can carry the same info across many pages, but they all must be in order. If you take these variables to yet a third page, all this coding must be redone on the new page. The variable does not carry across pages. The text in the URL carries. Once it gets to the new page, it has to be assigned a new variable…each time.
Maybe you want to read that tutorial on setting cookiesbefore delving further into this.
Enjoy!
