Passing info between pages w/ URL

HairySpider · #1 (**permalink**) 01-07-05, 12:17 PM

Hi, please could someone tell me how to pass form info from one page to another using the URL. I would have an HTML form on the page which would create a URL like below when users click submit:

http://mysite.com/eBay/checkout.html...er=46552473652

How can I do this, then put the restults back in the form on the next page?

Thanks so much in advance, Luke

4thorder · #2 (**permalink**) 01-07-05, 09:23 PM

The first part of your question is the easiest. In your form on the first page use the "GET" method to submit to your action (or next) page.

Code:

 
<FORM method="GET" action="formActionPage.htm">
<P><INPUT type="text" name="testVariable" size="20" value="testVariable"></P>
<P><INPUT type="submit" value="Submit"></P>
</FORM>

This will pass the variable using the url string:
whateveryoursiteis.com/formActionPage.htm?testVariable=testVariablevalue

The second part of your question is a little more involved. To start off, the most common way to grab information from the "GET" method is to use a server side laguage such as PHP, ASP, CF, PERL, ETC. However you can get this passed value by parsing the url string using JavaScript. Below are the two pages required to do so followed by a demonstration link and an additional explanation link.

formPage.htm

Code:

 <HTML> 
<HEAD>
<TITLE>formPage.htm</TITLE>
<STYLE>
<!--
body {background:white; font-family: Tahoma; color: #32433D ; font-size: 10pt; margin: 10px;}-->
</STYLE>
</HEAD>
<BODY>
<FORM method="GET" action="formActionPage.htm">
<P><INPUT type="text" name="testVariable" size="20" value="testVariable"></P>
<P><INPUT type="submit" value="Submit"></P>
</FORM>
<P>Upon submission to the page &quot;formActionPage.htm&quot; the variable will be parsed 
from the URL string and sent to an input text box for viewing.</P>
<P><I>Note: Good for only one variable.</I></P>
<P>Tested in FireFox, Netscape, and Internet Explorer</P>
<P>&nbsp;</P>
</BODY>
</HTML>

formActionPage.htm

Code:

 
<HTML>
<HEAD>
<TITLE>formActionPage.htm</TITLE>
<STYLE>
<!--
body {background:white; font-family: Tahoma; color: #32433D ; font-size: 10pt; margin: 10px;}-->
</STYLE>
<script type="text/javascript">
window.onload=getPassedInfo;
function getPassedInfo()
{
// Grab URL String
var URLString=window.location.href
 
//Determine length of entire string
wholePathLength=URLString.length;
 
// Determine length of string without the passed variable value
strippedPathLength=URLString.substring(0,URLString.lastIndexOf("=")).length+1;
 
// Use Substring to isolate the passed value
info= URLString.substring(strippedPathLength,wholePathLength);
 
// Send information to form element for viewing
document.getElementById("passedInfo").value=info
}
</script>
</HEAD>
<BODY>
<P>Passed Information: <INPUT type="text" id="passedInfo"></P>
</BODY>
</HTML>

CLICK HERE FOR DEMO

After creating this I searched for an additional detailed explanation for you. This explains it well and if you notice his method isnt far from the one I used.

http://www.htmlgoodies.com/beyond/jspass.html

HairySpider · #3 (**permalink**) 01-08-05, 04:00 AM

Thanks so much, Do it work with more than one varible being passed to the next page? I'll try myself, and post the reply here.

Luke

4thorder · #4 (**permalink**) 01-08-05, 05:56 AM

read that article and you can see how he does it. If you have any trouble just contact me.

TwoD · #5 (**permalink**) 01-08-05, 11:16 AM

Or use temporary cookies, makes the URL look nicer.
You could also "bounce" the variables, or even objects, between different frames or windows, depends on how your site is structured.

HairySpider · #6 (**permalink**) 01-09-05, 05:25 AM

I read the article before posting my last message, I meant say 8 varibles to another page (his only does 2 max). Can this be done? How do the cookies work, TwoD?

Many Thanks, Luke

TwoD · #7 (**permalink**) 01-09-05, 09:47 AM

From MS Script Editor:

Quote:

cookie Property

--------------------------------------------------------------------------------

Sets or retrieves the string value of a cookie.

Syntax

HTML N/A
Scripting document.cookie [ = sCookie ]

Possible Values

sCookie String that specifies the name=value; pair(s), plus any of the following values: expires=date; Setting no expiration date on a cookie causes it to expire when the browser closes. If you set an expiration date in the future, the cookie is saved across browser sessions. If you set an expiration date in the past, the cookie is deleted. Use GMT format to specify the date.
domain=domainname; Setting the domain of the cookie allows pages on a domain made up of more than one server to share cookie information.
path=path; Setting a path for the cookie allows the current document to share cookie information with other pages within the same domain—that is, if the path is set to /thispathname, all pages in /thispathname and all pages in subfolders of /thispathname can access the same cookie information.
secure; Setting a cookie as secure means the stored cookie information can be accessed only from a secure environment.

The property is read/write with no default value.

Expressions can be used in place of the preceding value(s), as of Microsoft® Internet Explorer 5. For more information, see dynamic properties.

Remarks

A cookie is a small piece of information stored by the browser. Each cookie is stored in a name=value; pair called a crumb—that is, if the cookie name is "id" and you want to save the id's value as "this", the cookie would be saved as id=this. You can store up to 20 name=value pairs in the cookie, and the cookie is always returned as a string of all the cookies that apply to the page. This means that you must parse the string returned to find the values of individual cookies.

You can use the Microsoft® JScript® (compatible with ECMA 262 language specification) split method to extract a value stored in a cookie.

Example

This example creates a cookie with a specified name and value. The value is passed to the JScript escape function to ensure that the value only contains valid characters. When the cookie is retrieved, the JScript unescape function should be used to translate the value back to its original form.

Sample Code

Code:

<SCRIPT>
// Create a cookie with the specified name and value.
// The cookie expires at the end of the 20th century.
function SetCookie(sName, sValue)
{
  document.cookie = sName + "=" + escape(sValue) + "; 
  expires=Mon, 31 Dec 1999 23:59:59 UTC;";
}
</SCRIPT>

This example retrieves the value of the portion of the cookie specified by the sCookie parameter.

Sample Code
<SCRIPT>
// Retrieve the value of the cookie with the specified name.
function GetCookie(sName)
{
  // cookies are separated by semicolons
  var aCookie = document.cookie.split("; ");
  for (var i=0; i < aCookie.length; i++)
  {
    // a name/value pair (a crumb) is separated by an equal sign
    var aCrumb = aCookie[i].split("=");
    if (sName == aCrumb[0]) 
      return unescape(aCrumb[1]);
  }

  // a cookie with the requested name does not exist
  return null;
}
</SCRIPT>

Basically, write all the values you want to pass into a string and separate them with "|" for example and then break them apart upon reading with myCookie.split("|") to get an array with all the values.