Passing Information Between Pages


If you add a form (or forms) to one or more of your pages, you can capture information that is input by the visitors to your page. This information can either be sent to you or used to control the subsequent browsing experience that the individual visitors have on your site. In this latter case you will probably need to pass information between the pages on your site.

There are in fact three different ways that you can use Javascript to pass information between the pages on your web site.

 

Using Cookies

A cookie is a piece of information written into a special file on your visitor's own computer. Information written in a cookie from one of your pages will be available to be read into any subsequent web pages on your site that the visitor goes to either in the current session or in any subsequent session (assuming that you don't set the cookie to expire at the end of the session and the visitor doesn't delete it).

Cookies are actually the most complicated way of passing information between web pages and can be easily disabled by the visitor disallowing the use of cookies on their computer. The real advantage that using cookies has is that information can be retained for use in subsequent sessions when the visitor returns to your site.

You can write a cookie using code such as this (where name is the name you are giving the cookie, value is the value that you want to save in the cookie, and expires is the date to which you want the cookie to be kept):

function set_cookie(name,value,expires) {
  if (!expires) expires = new Date();
  document.cookie = name + '=' + escape(value) + '; expires='
    + expires.toGMTString() + '; path=/';
}
 
set_cookie(
mycookie, value, expires);

You can then retrieve the values in a subsequent page at any time prior to the expiry date using code such as this (where name is the name of the cookie that you want to read and value is the field into which you want to load the contents of the cookie):

function get_cookie (name) {
  var dcookie = document.cookie;
  var cname = name + "=";
  var clen = dcookie.length;
  var cbegin = 0;
  while (cbegin < clen) {
    var vbegin = cbegin + cname.length;
    if (dcookie.substring(cbegin, vbegin) == cname) {
      var vend = dcookie.indexOf (";", vbegin);
      if (vend == -1) vend = clen;
      return unescape(dcookie.substring(vbegin, vend));
      }
    cbegin = dcookie.indexOf(" ", cbegin) + 1;
    if (cbegin == 0) break;
    }
  return null;
}
 
value = get_cookieArray('name');

You can also effectively delete an existing cookie by using code such as this to expire the cookie with a date well in the past so that the visitor's browser will remove it from their system:

function del_cookie(name) {
  document.cookie = name + '=' + '; expires=Thu, 01-Jan-70 00:00:01 GMT; path=/';
}
 
del_cookie('
name');

If you don't want to code the cookie functions yourself then check out our Cookie Toolbox.

 

Within Frames

A much easier way of passing information between pages is to place the pages into Frames. You can then attach the variables that you want to pass between the various pages that will be displayed within the frameset to the frameset definition itself rather than the pages within it. For example:

...
<script type="text/javascript">
arg1 = '';
</script>
</head>
<frameset
...

The variable can then be referenced from Javascripts contained within any pages that are displayed within this frameset by using the parent component of the Document Object Model. For example:

...
parent.arg1 = 'set value';
...

As you can see, the code involved to pass one field between pages is much less here than was required by the Cookies option above. The only disadvantage is that the values are only retained until the visitor exits from your frameset or clicks on the refresh button of their browser.

Of course having to contain all of the pages within frames is a disadvantage as some visitors may be using browsers that do not support frames however the number of browsers that do not support frames is falling so this should be less and less of a problem as time goes on.

 

Passing Parameters with the URL

The last way of passing parameters between pages is to pass the parameters on the end of the page address. If you have ever seen pages where the address has a question mark followed by additional values then you have found an example of a site that passes information between pages in this way. For example you might see a page that has several links all going to the same page but passing additional information to indicate which of the links was used to get to that page:

...
<a href="example.htm?1">Example One</a><br />
<a href="
example.htm?2">Example Two</a><br />
...

If the above code were placed within document.write statements in Javascript then the values following the question marks could be variables rather than fixed values.

You can then use the following Javascript code to retrieve the information following the question mark in the URL from within the called page.

var args = location.search.substr(1).split("?");

If you have need to pass more than one variable following the question mark then you will need to use some special character between the variables to separate them (eg. commas) and then split the variables again in the retrieving program.

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate