10.6 Passing Data Between Pages Via URLs

NN 2, IE 4(Mac)/5(Win)

10.6.1 Problem

You want to move user-influenced data from one of your pages to another without server intervention, cookies, or frames.

10.6.2 Solution

Pass the data as a search string appended to the URL of the next page and include a script in the next page to read the search string to retrieve the data. As a simple case, the following code passes a single value retrieved from a text input field as a search string:

<script language="JavaScript" type="text/javascript">
function goNext(url) {
    var data = document.forms[0].userName.value;
    location.href = url + "?" + escape(data);
}
</script>
...
<a href="page3.html" onclick="goNext('page3.html'); return false">...</a>

In the second document, an onload event handler retrieves the search string data and assigns the value to a text input field with the same name located on the second page:

<script language="JavaScript" type="text/javascript" >
function readData( ) {
    var srchString = unescape(location.search.substring(1, location.search.length));
    if (srchString.length > 0) {
        document.forms[0].userName.value = srchString;
    }
}
</script>
...
<body onload="readData( )">

You can embed both event handlers and functions into all related pages to keep the data moving through all page visits.

10.6.3 Discussion

The magic behind the URL scheme is all versions of Netscape Navigator, IE 4 or later for Macintosh, and IE 5 or later for Windows retain the search string that comes back from a server, even if the server doesn't use the information. A search string begins with a question mark delimiter following the address of the page. When assembling the URL for the next page, you must include this delimiter. At the same time, the function that reads the data must start with the first character following the delimiter.

The Solution demonstrates a very simple case of passing a single value from page to page. You can pass far more complex string data across pages. More typically, you assemble this data in the same kind of name/value pair format that browsers submit as form data, with an equals sign between the name and value and an ampersand character delimiting multiple name/value pairs:

pageURL?name1=value1&name2=value2&name3=value3

Take into account, however, that the purpose of passing data from page to page is to be able to use that data in the subsequent page. Since the name/value pair format of the typical search string is distinct from the syntax used by JavaScript, you'll need some conversion code that encodes JavaScript objects or arrays into the search string form prior to leaving the first page, and reconverts that search string into usable objects or arrays upon arriving at the second page.

For this purpose, you can use the same object-to-string library shown in Recipe 3.13. Both cookie data and search string data can (and some would say should) be formatted as name/value pairs that can then be reassembled in convenient JavaScript object form for distribution through form controls or just kept in global variables ready for other scripts to pluck their values. The following script segments demonstrate how a custom object's values can be passed and reassembled via URLs with the help of the objectsArraysStrings.js library from Recipe 3.12:

<script language="JavaScript" type="text/javascript" src="objectsArraysStrings.js">
</script>
<script language="JavaScript" type="text/javascript">
var customObject;
function goNext(url, obj) {
    srchString = object2String(obj);
    url += "?" + escape(srchString);
    location.href = url;
}
function readData( ) {
    var srchString = unescape(location.search.substring(1, location.search.length));
    if (srchString.length > 0) {
        customObject = string2Object(srchString);
    }
}
// other functions that create and/or modify 
// customObject in response to user action...
</script>
...
<body onload="readData( )">
...
<a href="page3.html" onclick="goNext('page3.html', customObject); return false">...
</a>

If your goal is to pass values of a form's entire control set from page to page, you can use the stringForms.js library from Recipe 8.14 to simplify the gathering and redeployment of form values on both ends:

<script language="JavaScript" type="text/javascript" src="stringForms.js">
</script>
<script language="JavaScript" type="text/javascript" >
function goNext(url, form) {
    srchString = form2ArrayString(form);
    url += "?" + escape(srchString);
    location.href = url;
}
function applyValues(form) {
    var srchString = unescape(location.search.substring(1, location.search.length));
    if (srchString.length > 0) {
        string2FormObj(form, srchString);
    }
}
// other functions that create and/or modify 
// customObject in response to user action...
</script>
...
<body onload="applyValues(document.forms[1])">
...
<a href="page3.html" onclick="goNext('page3.html', document.forms[0]); return false">...
</a>

Notice how both functions are generalized to accept form object references. This allows the invoking call to determine which of the page's forms (if there are more than one) are to be gathered or populated. Don't be fooled, however, by the apparent simplicity of the examples shown here; they rely on libraries that perform some heavy lifting with respect to converting objects to strings and manipulation of form data. Yet that's the purpose of a reusable utility library.

10.6.4 See Also

Recipe 3.13 for object and string conversions; Recipe 7.6 for an example of using URL data passing to ensure that a bookmarked page from a frameset always loads into that frameset; Recipe 8.14 for extracting all form control data for passage as string data.

[ Team LiB ]