Reading URL passed variables in JavaScript

Dev Shed Forums Sponsor:

August 15th, 2002, 09:55 AM

Robert12345

Contributing User

Join Date: Nov 2000

Posts: 70

Time spent in forums: 7 h 27 m 13 sec
Reputation Power: 13

Reading URL passed variables in JavaScript

I'm passing 4 variables from a Form via the GET method along the URL to a new page. That's the easy bit.

I can't understand the Javascript examples/tutorials online that try to explain how to read these in the newpage.

I don't really need to display the results on the new page, just have them inserted into a hidden field in a Form so that they can be POSTed along with extra information added to a 2nd Form on this new page.

I would be very grateful for some assistance.

August 15th, 2002, 10:17 AM

piglet

Jack of all trades

Join Date: Aug 2002

Posts: 14

Time spent in forums: < 1 sec
Reputation Power: 0

Hi Robert,

Thisis pretty simple - you just need to split the search string until you've got the bits in a state you can do something with them.

Try this with test.html?foo=bar;blah=whatever address:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE> New Document </TITLE></HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
if (location.search != "")
{
	var x = location.search.substr(1).split(";")
	for (var i=0; i<x.length; i++)
	{
		var y = x[i].split("=");
		alert("Key '" + y[0] + "' has the content '" + y[1]+"'")
	}
}	
//-->
</SCRIPT>
</BODY>
</HTML>

August 16th, 2002, 04:13 PM

Robert12345

Contributing User

Join Date: Nov 2000

Posts: 70

Time spent in forums: 7 h 27 m 13 sec
Reputation Power: 13

Dear Piglet

I thank you for your speedy reponse ...I hope you'll forgive me if I say that I don't follow your answer. Let me split my question down into 2 parts.

1. Lets say my Form generates a URL of:
http://www.mydomain.com?Submit=var1...ar4=a_selection

I understand the basic principles of what the Javascript should do - strip out &s, =signs, etc. I need help with a script that will deal with the general format I have outlined above.

Notes: although the stripping out of spaces, etc will not be required since all the field names and selection choices will be pre-written, I appreciate that including them in an example will be beneficial to others reading this.

2. How does one then take one of the stripped out variables and insert it into the likes of the value field in a second form as indicated in the ??? below

<input type="hidden" name="var1" value="???">

Can you help?

August 16th, 2002, 04:58 PM

bricker42

Moderator =(8^(|)

Dev Shed Intermediate (1500 - 1999 posts)

Join Date: Feb 2002

Location: Sacramento, CA

Posts: 1,710

Time spent in forums: 20 m 38 sec
Reputation Power: 13

There's a good script for this from webmokey.com

http://hotwired.lycos.com/webmonkey...gory=forms_data

August 16th, 2002, 05:45 PM

MJEggertson

Contributing User

Join Date: Jan 2002

Location: Seattle WA

Posts: 863

Time spent in forums: 22 sec
Reputation Power: 13

Here's some quick code I made, and I kept it as uncompact as possible to keep it clear, as well as used generous commenting.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Testing the Foo</TITLE>
</HEAD>
<BODY>
<!--
    Our input variable. It will eventually contain the value
    passed to the 'foo' variable via GET.
-->
<FORM name="MyForm">
    <INPUT name="foo">
</FORM>
<SCRIPT LANGUAGE="JavaScript">
<!--
// Create a global array that will hold the value of each variable,
// keyed by the name of the variable.
var GETDATA = new Array();

// Get the string that follows the "?" in the window's location.
var sGet = window.location.search;
if (sGet) // if has a value...
{
    // Drop the leading "?"
    sGet = sGet.substr(1);
    
    // Generate a string array of the name value pairs.
    // Each array element will have the form "foo=bar"
    var sNVPairs = sGet.split("&");
    
    // Now, for each name-value pair, we need to extract
    // the name and value.
    for (var i = 0; i < sNVPairs.length; i++)
    {
        // So, sNVPairs[i] contains the current element...
        // Split it at the equals sign.
        var sNV = sNVPairs[i].split("=");
        
        // Assign the pair to the GETDATA array.
        var sName = sNV[0];
        var sValue = sNV[1];
        GETDATA[sName] = sValue;
    }
}

// Finally, assign the value to foo.
if (GETDATA["foo"] != undefined)
    // Just in case we forgot to pass something to foo...
    document.forms.MyForm.foo.value = GETDATA["foo"];
//-->
</SCRIPT>
</BODY>
</HTML>

Hope this makes it clear. I used it by first saving it to a temp place on my hard drive. Double clicking opened it, then all I did was changed the url to add a "?foo=bar".

-mj

August 17th, 2002, 06:30 AM

Robert12345

Contributing User

Join Date: Nov 2000

Posts: 70

Time spent in forums: 7 h 27 m 13 sec
Reputation Power: 13

I understand!!!!

Many thanks to Bricker and MJ ...I read over the link info you posted Bricker and it looked well annotated ...but MJs looked ever more readable...and Hey Presto! I understood it!

For those like myself who can be a bit slow in working out certain things, I post the following demo that made me feel confident that I had what I was looking for, viz a script capable of reading multiple field values and then displaying them in a second Form (although I may well eventually make them hidden rather than text). I thank you all for your time and effort and hope my simplistic interpretation below will help a few others even more.

The Posting Form saved as 1.htm with another 4 fields added:
<html>
<body>
<form name=myForm method="GET" action="2.htm">
<input type=text name=foo size="20">
<input type=text name=goo size="20">
<input type=text name=hoo size="20">
<input type=text name=joo size="20">
<input type=text name=koo size="20">
<input type=submit>
</form>
</body>
</html>

The receiving Form (MJ's script from above) saved as 2.htm with the following changes:
1. Matching 'target' fields in the page 2.htm
<FORM name="MyForm">
<INPUT name="foo"><br>
<INPUT name="goo"><br>
<INPUT name="hoo">
<INPUT name="joo"><br>
<INPUT name="koo"><br>
</FORM>
....
2. Matching Javascript near the bottom of the script to extract matching data from the array...changes made in the middle and at the end of each line:
document.forms.MyForm.foo.value = GETDATA["foo"];
document.forms.MyForm.goo.value = GETDATA["goo"];
document.forms.MyForm.hoo.value = GETDATA["hoo"];
document.forms.MyForm.joo.value = GETDATA["joo"];
document.forms.MyForm.koo.value = GETDATA["koo"];

Wishing to hide a field would involve editing to:
<input type=hidden name=foo size="20">

This is probably a very crude editing ..but it works...many thanks to all

August 17th, 2002, 03:21 PM

piglet

Jack of all trades

Join Date: Aug 2002

Posts: 14

Time spent in forums: < 1 sec
Reputation Power: 0

Hi

Your original question was to populate hidden fields.

The easiest thing to do is to write them directly into the form...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML><HEAD><TITLE> New Document </TITLE></HEAD>
<BODY>

<form method="post" action="blah.asp">
<SCRIPT LANGUAGE="JavaScript">
<!--
if (location.search != "")
{
	var x = location.search.substr(1).split(";")
	for (var i=0; i<x.length; i++)
	{
		var y = x[i].split("=");
		document.writeln('<input type="hidden" name="'+y[0] + '" value="' + y[1]+'">')
	}
}	

//-->
</SCRIPT>
<input type="submit">
</form>
</BODY>
</HTML>

Reading URL passed variables in JavaScript

Developer Shed Advertisers and Affiliates