Log In

Come Join Us!

Are you a
Computer / IT professional?
Join Tek-Tips Forums!
  • Talk With Other Members
  • Be Notified Of Responses
    To Your Posts
  • Keyword Search
  • One-Click Access To Your
    Favorite Forums
  • Automated Signatures
    On Your Posts
  • Best Of All, It's Free!
  • Students Click Here

*Tek-Tips's functionality depends on members receiving e-mail. By joining you are opting in to receive e-mail.

Posting Guidelines

Promoting, selling, recruiting, coursework and thesis posting is forbidden.

Students Click Here


variable passing

How do I pass variables between two pages? (GET method) by chessbot
Posted: 26 Sep 04 (Edited 24 Apr 06)

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).

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

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.
<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>


The other way is through form values. For your form tag:
<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>
<input type="submit" value="Go!">

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.

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

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 showname.html.

<!-- 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[i].split("=");
    // Check if the correct variable
    if (parts[0] == varname)
      // Load value into variable
      value = parts[1];

      // End the loop
  // Convert escape code
  value = unescape(value);

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

  // Return the value
  return value;

// end hide -->
<script type="text/javascript">
<!-- hide
var name = getValue("name");
// end hide -->

Back to Javascript FAQ Index
Back to Javascript Forum

My Archive

Close Box

Join Tek-Tips® Today!

Join your peers on the Internet's largest technical computer professional community.
It's easy to join and it's free.

Here's Why Members Love Tek-Tips Forums:

Register now while it's still free!

Already a member? Close this window and log in.

Join Us             Close