WebReference.com - Chapter 6 of Beyond HTML Goodies, from Que Publishing (2/8)

[previous] [next]

Beyond HTML Goodies, chapter 6

Passing Variables with Forms and JavaScript

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 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. Okay, that's fine. So now how do I get information across pages? Well, you could do it through one page spawning another, and then another, and 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.

You can find this tutorial, and all of its examples, online at https://www.htmlgoodies.com/beyond/jspass.html.

You can download just the examples at https://www.htmlgoodies.com/wpg/.

I'll need two screen captures to show this effect. Figure 6.2 shows the form. Notice that I have put in my first and last name.

The Form Figure 6.2
Ready to go.

Figure 6.3 shows the next page after clicking the button. The values in those two text boxes have been plucked out and used to create the text of the page.

The Result Figure 6.3
Now that's a pretty cool trick. No cookies were used or harmed in the making of this effect.

How It Works

Let me start by showing you the code that made the small form in Figure 6.2:

<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 flag. The METHOD is set to LINK, and the ACTION simply points toward another page. Nowhere does it say to send the user information anywhere. When you set up the form in this manner, the user input is carried along in the URL. This format does not require that the form be given a name. We are not interested in the form as a whole. We want the text from the individual text boxes.

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, yes? 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 that 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 her 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. I have written my code in JavaScript 1.0 so that most browsers can understand what is to happen. I saw a suggestion on doing this by setting the answers to an array. It's clever coding, but it's in JavaScript 1.2, which means bunches of browsers will throw errors. The array method allows for endless variables being passed but limited browsers. Mine allows for the most number of browsers to be able to play with the code but only two variables. You decide.

Get the First Name

Okay, because 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 previous form 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 up front the hardest part of this process. It kept me at bay for a good hour. I knew that the easiest method for doing this was to use substring JavaScript commands and grab elements from the URL. I also knew that I could grab the URL of a page simply by using the command window.location. Here is the URL of the online page using the command: https://www.htmlgoodies.com/beyond/jspass.html.

It's 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, which means that it cannot be acted on like a text string. Oh, that drove me nuts. After I figured out how to get it from a property to a text string, I was fine. Let's look at that part first.

Okay, JavaScript friends, I know that 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 might 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's 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 in the code snippet? The NAME of the form itself is joe, and the NAME or the hidden text box is burns. By adding value to the end of the hierarchy statement, I basically forced a value in to the box.

The next line grabs that value 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 that it looks like this:

https://www.server.com/jspass2.html?FirstName=Super&LastName=Man

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 preceding example, we want the text Super yanked out of this line of letters.

The keys would most likely be the equal 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 that we add one because we don't want the equals sign. Adding one skips it. Notice that each line is acting on 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.write command. 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 on.

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 that we only need to set one point to look for. Nothing follows 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), 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.write statement 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 wherever you want. I have some text thrown in, but that's easily taken out. Remember to remove the plus sign if you take out the text. 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, producing an error. The box is visible this time around. The value of the function is assigned to the variable zork, and then zork is put in to the text box. That's 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.

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. After it gets to the new page, it has to be assigned a new variable--each time.