Intro

Passing information to another document requires the use of Javascript with the makeup of the script dependant on the information being passed. In its simplest form, a link is used to send a string to the recieving URL, a query string is specified by the values following the question mark (?).

<a href="targetpage.htm?hello world">Send me</a>

A script in the target page is then used to take this value (query string) and assign it to a variable which can then be used in the target page.

<script type="text/javascript">
<!--
if (location.search.length > 0){
dataPassed = unescape(location.search.substring(1))
}
//-->
</script>

The above script is the basic requirements to recieve passed data.
If the data is more than a simple value then additions to the script may be required, with an additional script needed in the document sending the data.
The script in the sending page would compile the data into a single string for passing to the target page, the script in the target page would then de-compile the single string back into it's original format.

See links at top of page for more examples.

Example:

Passing a simple value.

In this document.

<a href="page2.htm?hello world">Pass a string</a>

<a href="page2.htm?1 2 3 4 5">Pass a number</a>

In page2.htm.

<script type="text/javascript">
<!--
function getData(){
if (location.search.length > 0){
dataPassed = unescape(location.search.substring(1))
document.write(dataPassed)
}
}

// add onload="getData()" to the opening BODY tag

//-->
</script>

Example:

Three links to three images would normally mean the use of three pages, the following links use the same page.

In this document.

<a href="page2.htm?pic01.jpg">Show Image 1</a>

<a href="page2.htm?pic02.jpg">Show Image 2</a>

<a href="page2.htm?pic03.jpg">Show Image 3</a>

<a href="page2.htm?This is not a picture">Just some text</a>

The link determines what is shown when page2.htm is loaded.

The script in page2.htm is as follows:

<script type="text/javascript">
<!--
dataPassed=""

if(location.search.length > 0){
dataPassed = unescape(location.search.substring(1))
}

function showMe(){
if(dataPassed.indexOf("gif")!= -1||dataPassed.indexOf("jpg")!= -1){ // if search string is an image
document.write("<img src=\""+dataPassed+"\">") // show the image
}
else{ // if not an image
document.write(dataPassed) // then write the string
}

}
//-->
</script>

And placed where the images are to be shown in page2.htm

<script type="text/javascript">
<!--
showMe()
//-->
</script>

None of the examples on this page required a script to be in this page but the image examples needed an additional function in page2.htm to checked wether the search string was an image or text.

Compiling Data

Values

The data that is to be transfered has to be compiled into a single string which means you need to use a method so that you will know what goes where, and with what.
In order to do this characters are used as seperators, the characters used must not be included in the normal flow of the string.
The 2 characters commonly used as separators are the "=" sign and the "&" sign.

In order to send information from 2 text fields

they must be compiled into a single string.

myString = document.form1.textfield1.value+document.form1.textfield2.value

myString = "JohnDoe"

As you can see you end up with one continuous word which means the recieving page would not know if this is one word or two.
To isolate the words we need to add a seperator "=" between "John" and "Doe" to give you ""

myString=document.form1.textfield1.value+"="+document.form1.textfield2.value

myString = "John=Doe"

The string is then sent to the recieving page as follows.

<script type="text/javascript">
<!--
function sendme(){
myString = document.form1.textfield1.value+"="+document.form1.textfield2.value
location.href = "page2.htm" + '?' + myString
}
//-->
</script>

<a href="#null" onclick="sendme()">Send data</a>

In the recieving page we now need a script to remove the seperator and put the correct value in the right textfield.
For this we can use the "Split" method which splits a string object and creates an array of strings.

<script type="text/javascript">
<!--
var dataPassed = ''

function getData(){
if (location.search.length > 0){
dataPassed = unescape(location.search.substring(1))

tempArray=dataPassed.split("=") // create the array tempArray = ("John","Doe")
document.form2.textfield1.value=tempArray[0]
document.form2.textfield2.value=tempArray[1]
}
}

//add onload="getData()" to the opening BODY tag

//-->
</script>

Knowing that the new array will contain 2 words at tempArray[0] and tempArray[1] we now access that array for the information we want and place it in the textfields on page 2.htm.

Transfer Complete €:-)

Paired Values

To pair up values we need to add extra statements to the scripts.

Once again the textfield values have to be compiled into a single string.
This time we'll let the script check through the form elements and get all the textbox values.

<script type="text/javascript">
<!--
myString=""
function sendme(){
for(i=0;i<document.form1.length;i++){
if(document.form1.elements[i].type=="text"){
myString+=document.form1.elements[i].value
}
}
location.href = "page2.htm" + '?' + myString
}
//-->
</script>

You can see from the above that myString has once again been complied as a continuous string and that a script would not know where one word ends and the next word begins.
Again we need to add the seperator = but in addition we need a different seperator to mark the end of a pair, for this we use the character &

<script type="text/javascript">
<!--
myString=""
count=0
function sendme(){
for(i=0;i<document.form1.length;i++){
if(document.form1.elements[i].type=="text"){
count++
if(count==1){
myString+=document.form1.elements[i].value+"="
}
else{
myString+=document.form1.elements[i].value+"&"
count=0
}

}
}
location.href = "page2.htm" + '?' + myString
}
//-->
</script>

We can now see that we have two names

So in the sending page we need the above script and the following link.

<a href="#null" onclick="sendme()">Send data</a>

In the recieving page

Now that we have complied our single string we need to de-compile it back into it's original form.

<script type="text/javascript">
<!--
var dataPassed = '';

function getData(){
if (location.search.length > 0)
dataPassed = unescape(location.search.substring(1));

count=0
tempArray=dataPassed.split("&") // split the string at characters "&" and create an array of values

for(i=0;i<tempArray.length-1;i++){
tempArray2=tempArray[i].split("=") // get value at tempArray[i] and split at character "="

for(j=0;j<tempArray2.length;j++){
document.form2.elements["textfield"+(count+1)].value=tempArray2[j] // assign values
count++
}

}

}

// add onload="getData()" to the opening BODY tag

// -->
</script>

<form name="form2">
<input type="text" name="textfield1" value=""> <input type="text" name="textfield2" value="">
<input type="text" name="textfield3" value=""> <input type="text" name="textfield4" value="">
</form>

Transfer Complete €:-)