...

View Full Version : Passing variables from one page to hidden form fields on another page



Lisae
05-26-2005, 09:12 PM
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?

Harry Armadillo
05-27-2005, 01:33 AM
The problem is here on page2:
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:
<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:
<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>

Willy Duitt
05-27-2005, 03:24 AM
http://www.webdeveloper.com/forum/showthread.php?t=67504



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum