Passing Parameters Via Query Strings

One of the easiest methods of passing information between pages is to pass the information in a query string on the end of the address of the page you are calling. To do this we need to do two things, first we need to add the information to be passed to the end of the link and second we need to process that information on the page that is linked to. How this works is best shown if we look at an example.

Let's say that we want to pass a product code and description from one page to another. We have three different products, a red coat (product code CR), a green coat (product code CG), and a blue coat (product code CB). We can create links that will pass the product code and description to the purchases page by coding three web links as follows:

<a href="purchases.htm?code=CR&desc=Red%20Coat">
Red Coat</a><br/>
<a href="purchases.htm?code=CG&desc=Green%20Coat">
Green Coat</a><br/>
<a href="purchases.htm?code=CB&desc=Blue%20Coat">Blue Coat</a><br/>

The query string containing the values to be passed is separated from the address of the page that we are passing the parameters to by a question mark (?), each parameter being passed is separated from the next by an ampersand (&), the name of each field is separated from the value of the field by an equals sign (=), and any non alphanumeric characters in the field values is 'escaped' (eg. spaces are replaced by %20).

As you can see no JavaScript is required to pass the parameters using a query string. Where the JavaScript comes in is that HTML has no way to read and process a query string passed to it. The query string can only be processed using a server side scripting language such as Perl or PHP or by a client side scripting language - JavaScript.

We can easily set up a JavaScript function that will retrieve the query string and load an array with the values passed in the query string. Here it is. This code as with almost all JavaScript should be attached just before the </body> tag.

var qsParm = [];
function qs() {
var query = window.location.search.substring(1);
var parms = query.split('&');
for (var i=0; i<parms.length; i++) {
var pos = parms[i].indexOf('=');
if (pos > 0) {
var key = parms[i].substring(0,pos);
var val = parms[i].substring(pos+1);
qsParm[key] = val;
}
}
}

The only other thing that we need to do is to initialize entries in the array for the fields that we want the page to process and to actually call the above function to retrieve the values. If we are adding the code to the purchases page then we are expecting code and desc fields to be passed from the previous page. Of course the purchases page may be reached without values for these fields being selected so we need to assign default values to the fields before we call the function to load them with the passed values. Here is the code that does this for us.

qsParm['code'] = null;
qsParm['desc'] = null;
qs();

The values passed from the previous page are now accessible to any JavaScript code in the current page by referencing the appropriate qsParm array entries. Of course you may want to check if the fields are still set to null (meaning that no value was passed for that field). So to display the product that was selected on the previous page we can use the following code to display a message in whatever tag in our page has id="msg".

if (qsParm['code'] && qsParm['desc'])
document.getElementById('msg') = 'You selected' + qsParm['code'] + ' : ' + qsParm['desc']);

 

This article written by Stephen Chapman, Felgall Pty Ltd.

go to top

FaceBook Follow
Twitter Follow
Donate