How to pass data from one page to another

Page Contents

• Introduction
• Simple Forms
• Receiving and decoding data
• Other uses

Introduction

It is a simple matter to direct the browser to another page, using JavaScript:

location.href=new_page.htm

It is also quite straight forward to pass data along to the new page - by using the same mechanism that forms use.

Simple Forms

Consider the simple form:

<form action="script8.htm">
<input type="text" name="Something">
</form>

the browser will encode the name of the input field and its value as part of the URL when it invokes the target page (here called 'script8.htm'). The first name and value pair are encoded by appending '?field-name=value' to the URL. So for the above example this would be:

script8.htm?Something=...

Any additional parameters are encoded by appending '&field-name=value' to the URL.

Note: If you wanted to explicitly specify the "method" (for style or clarity reasons) then the example above would become:

<form method="get" action="script8.htm">
<input type="text" name="Something">
</form>

but since "GET" is the default method for forms, it does not need to be specified.

Receiving and decoding the data

The encoded values are available to the receiving page in 'location.search'. For instance, for this page the value of 'location.search' is:

''

This will be empty the first time you visit or view this page, but will contain some text when you try the examples later on this page.

As a first simple example, the box below is made using the form code shown at the top of this page.

Try entering something and pressing Return.

Two things to remember when manipulating 'location.search':

1. The sending form will have replaced any spaces with '+' signs, so you will need to do perform the inverse substitution.

2. The sending form will have used 'escape' on the parameter values so you must use 'unescape' to get back to the original string.

Whilst you can manipulate 'location.search' directly and extract the data you need from it, it is probably more convenient to write yourself a function to do it that includes the above rules. The following is a suggestion that is used on this web site:

<script type="text/javascript">
function GetParam(name)
{
  var start=location.search.indexOf("?"+name+"=");
  if (start<0) start=location.search.indexOf("&"+name+"=");
  if (start<0) return '';
  start += name.length+2;
  var end=location.search.indexOf("&",start)-1;
  if (end<0) end=location.search.length;
  var result='';
  for(var i=start;i<=end;i++) {
    var c=location.search.charAt(i);
    result=result+(c=='+'?' ':c);
  }
  return unescape(result);
}
</script>                                                      

Comparing the use of this function with the contents of 'location.search':

location.search=	''
GetParam('Something')=	''

Other uses

The example above uses a form, but the same mechanism can be used to pass data without the use of forms. The only thing to remember is to use the 'Escape' function to encode the value of your data. For example:

location.href = 'script8.htm?Something='+escape('1. This works too')

location.href = 'script8.htm?Something=2.%20This%20works%20too'

<A HREF='script8.htm?Something=3.%20This%20works%20too'>Click here</A>