#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2000
    Posts
    70
    Rep Power
    15

    Question 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.
  2. #2
  3. Jack of all trades
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Posts
    14
    Rep 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>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2000
    Posts
    70
    Rep Power
    15
    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=...r4=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?
  6. #4
  7. No Profile Picture
    Moderator =(8^(|)
    Devshed Intermediate (1500 - 1999 posts)

    Join Date
    Feb 2002
    Location
    Sacramento, CA
    Posts
    1,710
    Rep Power
    14
    There's a good script for this from webmokey.com

    http://hotwired.lycos.com/webmonkey/...ory=forms_data
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    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
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2000
    Posts
    70
    Rep Power
    15

    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
  12. #7
  13. Jack of all trades
    Devshed Newbie (0 - 499 posts)

    Join Date
    Aug 2002
    Posts
    14
    Rep 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>

IMN logo majestic logo threadwatch logo seochat tools logo