Thanks to for this tutorial.
Passing variables from page to page
This question has come up a lot of late.
HTML is a stateless: http://www.webopedia.com/TERM/s/stateless.html
protocol, which means that it has the memory of a goldfish. Every page is
unaware of what happened previously, and it is difficult to pass variables
from one page to the next. There are three non-server related methods
for maintaining state:
Cookies
Frames
URL Search property
-- Cookies --
Can be set and then read by the next page. There are heaps of Cookie How To's
around. Most functions are based on Bill Dortch's public domain functions.
eg.
See:
http://www.webdeveloper.com/javascript/javascript_html_tnt_cookies.html
http://hotwired.lycos.com/webmonkey/reference/javascript_code_library/wm_ckie_lib/?tw=reference&category=forms_data
http://members.ozemail.com.au/~dcrombie/cookie.html
The disadvantage of cookies is that they can be turned off by the user.
-- Frames --
The topmost window or a static banner frame can be used to store variables
whilst other frames change. Useful is the special keyword top which
refers to the page containing the first frameset.
eg. top.favoriteFood = "Ice Cream" , parent.frames.banner.myName="Lee"
The disadvantage is that frames may be impractical.
-- URL Search property --
The location object includes protocol, host, pathname, hash and search, so
we can load up the search property to suit our needs.
The disadvantage is that the user can see (and possibly alter) the data, so
if you're passing anything important it's best to encrypt it with several
check digits.
An example illustrates:
Page 1
<?
<form>
<input type="button" onclick="nextPage('Disney')" value="Disney Ducks">
<input type="button" onclick="nextPage('Warner')" value="Warner Ducks">
</form>
<script language="Javascript">
function nextPage(strStudio) {
var strSearch = "?studio=" + strStudio;
if (strStudio == "Warner") strSearch += "&ducks=Daffy";
if (strStudio == "Disney") strSearch += "&ducks=Huey+%2C+Duey+%26+Looey";
var newLocation = "http://www.someSite.com/Page2.html" + strSearch
location.assign(newLocation)
}
</script>
?>
This page simply navigates to the next page using either
http://www.someSite.com/Page2.html?studio=Disney&ducks=Huey+%2C+Duey+%26+Looey
or
http://www.someSite.com/Page2.html?studio=Warner&ducks=Daffy
Note that we replace spaces by plus(+) signs, and punctuation by the ascii code
(comma = %2C Ampersand = %26).
The next page needs to examine the search property of the URL:
Page 2
<? //can delete these php tags <?
<script language="Javascript">
function plusUnescape(str) { // the unescape function won't convert plus signs
str = '' + str; // to spaces; like you see in search strings
while (true) {
var j = str.indexOf('+');
if (j == -1) break;
str = str.substring(0,j) + ' ' + str.substring(j+1,str.length);
}
return unescape(str);
}
function getArgument (theKey) {
var args = new Array ();
var argstring = window.location.search;
if (argstring.charAt(0) != '?') return false;
argstring = argstring.substring(1, argstring.length);
var argarray = argstring.split('&');
for (var j=0; j < argarray.length; j++) {
var singlearg = argarray[j].split('=');
if (singlearg.length != 2) continue; // not a valid argument
var argsKey = plusUnescape(singlearg[0]);
var argsValue = plusUnescape(singlearg[1]);
args [argsKey] = argsValue;
}
return args[('' + theKey)]
}
function whichDucks() {
var strStudio = getArgument("studio")
if (!strStudio) return false; // nothing passed
var strDucks = getArgument("ducks")
alert("The " + strStudio + " studio created the duck(s) " + strDucks)
}
</script>
<form>
<input type="button" onclick="whichDucks()" value="Which Ducks">
</form>
?>
Show Printable Version
No Reviews to show
