4thorder(TM) - Code Snippets and Full Scripts

Retrieve Passed Variable From Form

Question:

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 when users click submit:

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

Answer:

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

Top of Page