December 2006 Technical Tip - JavaScript: Passing data between pages

December 2006 Technical Tip – JavaScript: Passing data between pages

The example contained in this article shows how to pass data between pages when using JavaScript.

Here is the sending page. I've typed Hello world in the text box before clicking on the button:

Here is the code which created the sender. Note the use of onsubmit="dosubmit()". The name of this method is significant. The URL of the next page is assigned to document.myform.action. Setting window.event.returnValue to true causes the submit to take place.

<html>
<head>
<title>I am the sender</title>

<script language="JavaScript">

function dosubmit()
{
  document.myform.action = "receiver.html?" + document.myform.misc.value;
  window.event.returnValue = true;
}

</script>

</head>

<body>

<h3>I am the sender</h3>

<form name="myform" method="POST" action="" onsubmit="dosubmit()">
  <input type="text" name="misc" />
  <br/><br/>
  <input type="submit" value="Send text to receiver"/>
</form>

</body>

</html>

Download file here.

Here is the receiving page. Note how Hello%20world appears in the URL. Spaces are encoded as %20. Other selected special characters are similarly "escaped".

Here is the code which created the receiver. Note the JavaScript code which must appear after the form. The unescape method is used to decode the escaped characters.

<html>
<head>
<title>I am the receiver</title>
</head>

<body>

<h3>I am the receiver</h3>

<form name="myform" action="" >
  Value received: <input type="text" name="misc" value="" />
</form>

<script language="JavaScript">

// this script must be after the form else
// the document object is not recognized.
// unescape converts %20 to blanks, etc.

  var string = window.location.href;
  var getit = new Array();
  getit=string.split("?");
  document.myform.misc.value = unescape(getit[1]);

</script>

</body>

</html>

Download file here.

We hope you will consider Caliber Data Training when you are in need of high quality HTML and JavaScript training.