Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    May 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Passing variables from one page to hidden form fields on another page

    I have a long form that I want to break into two pages. (I have a couple of test files that I'm trying to get to work first, then I'll add the rest of the fields.) Here's what I'm using for the first page:

    <html>
    <head>
    <title>New User Request</title>
    </head>

    <h1>Online Request</h1>

    <form action="Page2.htm" method="get">
    <p><b>Your First Name: <input type="text" id="userfirstname" name="userfirstname" size="30"></b></p>
    <p><b>Your Last Name: <input type="text" id="userlastname" name="userlastname" size="30"></b></p>
    <p><input type="submit" name="Submit" value="Submit"><input type="reset" value="Reset"></p>
    </form>
    </body>
    </html>


    ...and Page2.htm is:

    <html><head>
    <title>New User Request Page 2</title></head>
    <body>
    <script type="text/javascript">
    //<!

    function loadVals()
    {
    var url = document.location.href;

    var temp = url.split('?');

    temp = temp.split('&'); // Now we have all the values in an array, with each element looking like "var=val";

    for( i=0; i<temp.length; i++)
    {
    var qval = temp[i].split("=");
    document.getElementById(qval[0]).value = qval[1];
    }
    }

    //>
    </script>
    <form name="NewUser" action="mailTo:email@address.com" Method="Post">

    <p><input type="hidden" id="userfirstname" name="userfirstname"></p>
    <p><input type="hidden" id="userlastname" name="userlastname"></p>
    <p><b>Your Department: <input type="text" name="Deptname" size="30"></b></p>
    <p><b>Your Role: <input type="text" name="Rolename" size="30"></b></p>
    <p><input type="submit" name="Submit" value="Submit"><input type="reset"
    value="Reset"></p>
    </form>

    </body>
    <script>loadVals();</script>
    </html>

    I want to put each of the passed variables into hidden fields, so the end user doesn't see them, but they are still passed when I submit the form on the second page. I'm trying to use the query string, and am able to pass the data to the second page, but I don't know how to take what is passed and put it into the appropriate fields. The data is there in the query string when I submit Page1.htm and get to Page2.htm, but its not populating the form fields. I changed them both to "text" instead of "hidden" just to test, and the data does not show up in them, and isn't in the email that the asp script sends. Also, due to company politics (long story), I can't use server-side technology, I need something client-side. Can anyone help?

  • #2
    Regular Coder
    Join Date
    Feb 2005
    Posts
    400
    Thanks
    0
    Thanked 0 Times in 0 Posts
    The problem is here on page2:
    Code:
     var temp = url.split('?');
    temp = temp.split('&'); // Now we have all the values in an array, with each element looking like "var=val";
    The first line sets temp as an array of strings (before and after your question mark). In line two you try to use split again, but split works on strings and not arrays.

    You could go with temp = temp[1].split('&'), but there's a better solution. Browsers already split the current URL into parts, just grab document.location.search!

    Another problem is your submit buttons. You have it named in page1, so it will be passed to page2. But on page2, you don't have an id for submit. So document.getElementById(qval[0]) will fail when it gets to the "Submit=Submit" part of your URL. Either give submit an id on page2, or better yet remove the name on page1.

    Modified page1:
    Code:
    <html>
    <head>
    <title>New User Request</title>
    </head>
    
    <h1>Online Request</h1>
    
    <form action="Page2.htm" method="get">
    <p><b>Your First Name: <input type="text" id="userfirstname" name="userfirstname" size="30"></b></p>
    <p><b>Your Last Name: <input type="text" id="userlastname" name="userlastname" size="30"></b></p>
    <p><input type="submit" value="Submit"><input type="reset" value="Reset"></p>
    </form>
    </body>
    </html>
    Modified page2:
    Code:
    <html><head>
    <title>New User Request Page 2</title></head>
    <body>
    <script type="text/javascript">
    function loadVals(){
      var query = document.location.search.substr(1);
      var temp = query.split('&');
    
      for( i=0; i<temp.length; i++){
        var qval = temp[i].split("=");
        document.getElementById(qval[0]).value = qval[1];
        }
      }
    </script>
    <form name="NewUser" action="mailto:email@address.com" method="post">
    <p><input type="text" id="userfirstname" name="userfirstname"></p>
    <p><input type="text" id="userlastname" name="userlastname"></p>
    <p><b>Your Department: <input type="text" name="Deptname" size="30"></b></p>
    <p><b>Your Role: <input type="text" name="Rolename" size="30"></b></p>
    <p><input type="submit" value="Submit"><input type="reset"
    value="Reset"></p>
    </form>
    
    </body>
    <script>loadVals();</script>
    </html>

  • #3
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •