Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

How do I pass variables between two pages? (GET method)

variable passing

How do I pass variables between two pages? (GET method)

by  chessbot  Posted    (Edited  )
There are many times it might be necessary to pass a variable between two pages. If one wanted to perform a DHTML version of a server-side page generator (index.asp?page=home.html) or just wanted to be able to fill in forms with default values, one needs to be able to pass variables between pages. This tutorial focuses on the GET method (the stuff after the ? at the end of the URL).

Pros:
This method always works as long as the user has Javascript enabled. It is browser-nonspecific.

Cons:
This method does NOT hide variables from the user! The user is able to see all variables and their values in the location box at the top of their screen.

1. How do I append stuff to the URL?
There are more than one ways to append "stuff" to the URL. The method depends on the way you want variables to be passed.

If the next page is accessed through a link, then the <a> tag can be used alone.
[tt]<a href="redirect.html?page=1">Page 1</a>
<a href="redirect.html?page=2">Page 2</a>
<a href="redirect.html?page=3">Page 3</a>[/tt]
etc.

The other way is through form values. For your form tag:[tt]
<form name="tform" action="redirect.html" method="get">
<select name="page">
<option value="1" selected="selected">Page 1</option>
<option value="2">Page 2</option>
<option value="3">Page 3</option>
</select><br>
<input type="submit" value="Go!">
</form>[/tt]

For this tutorial, I will use a simple name page, one with a field to enter the name, another with a page to display it. However, this method will work for as many variables as necessary, as long as the maximum length of the URL is not passed.

[tt]
<!-- entername.html (pseudocode) -->
<html>
<head>
<!-- head stuff here -->
</head>
<body>
<form name="theform" action="showname.html" method="get">
<input type="text" name="name"><br>
<input type="submit" value="Show">
</form
</body>
</html>
[/tt]

The above is a simple page that allows a user to enter their name.

2. How do I retrieve the values from the URL?
Here is [tt]showname.html[/tt].

[tt]
<html>
<head>
<!-- head stuff -->
<script type="text/javascript">
<!-- hide from old browsers

function getValue(varname)
{
// First, we load the URL into a variable
var url = window.location.href;

// Next, split the url by the ?
var qparts = url.split("?");

// Check that there is a querystring, return "" if not
if (qparts.length == 0)
{
return "";
}

// Then find the querystring, everything after the ?
var query = qparts[1];

// Split the query string into variables (separates by &s)
var vars = query.split("&");

// Initialize the value with "" as default
var value = "";

// Iterate through vars, checking each one for varname
for (i=0;i<vars.length;i++)
{
// Split the variable by =, which splits name and value
var parts = vars.split("=");

// Check if the correct variable
if (parts[0] == varname)
{
// Load value into variable
value = parts[1];

// End the loop
break;
}
}

// Convert escape code
value = unescape(value);

// Convert "+"s to " "s
value.replace(/\+/g," ");

// Return the value
return value;
}

// end hide -->
</script>
</head>
<body>
<h1>Hello,
<script type="text/javascript">
<!-- hide
var name = getValue("name");
document.write(name);
// end hide -->
</script>
</h1>
</body>
</html>
[/tt]
Register to add this FAQ to your archive
Register to rate this FAQ  : BAD 1 2 3 4 5 6 7 8 9 10 GOOD
Please Note: 1 is Bad, 10 is Good :-)

Part and Inventory Search

Back
Top