...

View Full Version : Save inputfields with cookies



frank-lennart
09-03-2008, 11:56 AM
Hi.

I would like to save several input textfields and also dropdown selected options in to a cookie.

Example:

At the first page you would write in two textinputs, and select two options in a dropdown selector. Then click on the "Send button".

You will be redicted to another page, and there you would see the data (like document.write) you wrote and selected.

(Fill A-side with data, see the data on B-side)

Can anyone help me how to do?

Thanks!

Cranford
09-03-2008, 12:36 PM
You don't need cookies to do that. Many user's have cookies blocked. The easiest way to "send" data from one page to the next is to build and append a "query string" to the second page URL:

secondPage.html?text1=hello&text2=goodbye

Just take a look at the address bar above, right now, there's a query string. The query string starts with the question mark.

When you submit a form using the GET method instead of POST, it will automatically build the query string.

Search this forum, or the internet for how to "read" or "parse" the query string.

ess
09-03-2008, 03:31 PM
You should note that HTTP GET requests are not an ideal solution when processing large data (GET request data size is limited), or when data contains none-ascii characters.

for more info, see http://www.cs.tut.fi/~jkorpela/forms/methods.html

I would suggest that you post requests between pages and save user progress in hidden input fields such as


<input type="hidden" name="page1" value="_write value here" />

Cheers
~E

Cranford
09-03-2008, 08:14 PM
Here's an example. Main.html submits to Greeting.html

Main.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">


</script>
<style type="text/css">

body {background-color: #eae3c6; margin-top: 60px;}
form {width: 620px; margin: auto; font-family: times; font-size: 12pt;}
fieldset {width: 620px; padding-left: 10px; background-color: #f0fff0; border: 1px solid #87ceeb;}
legend {font-family: times; font-size: 14pt; color: #00008b; background-color: #87ceeb; padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
.submitBtn {font-family: tahoma; font-size: 10pt; display: block; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;}

</style>
</head>
<body>
<form action="./Greeting.html" method="get">
<fieldset>
<legend>Form</legend>
<select name="firstName">
<option value=""> Make a Selection </option>
<option value="Thomas"> Thomas </option>
<option value="Joseph"> Joseph </option>
<option value="Michael"> Michael </option>
</select>
<input type="text" name="lastName" value="Smith">
<input type="submit" name="submit" value="Submit" class="submitBtn">
</fieldset>
</form>
</body>
</html>


Greeting.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Any Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">

function init(){

var names = location.search.substring(1,location.search.length).split('&');
var fName = names[0].substring(names[0].lastIndexOf('=')+1,names[0].length);
var lName = names[1].substring(names[1].lastIndexOf('=')+1,names[1].length);
document.forms[0]['lastName'].value = lName;
var nOpt = document.forms[0]['firstName'].options.length;
for (i=1; i<nOpt; i++)
{
if (fName == document.forms[0]['firstName'][i].value)
{
document.forms[0]['firstName'].selectedIndex = i;
}
}
}

onload = init;

</script>
<style type="text/css">

body {background-color: #eae3c6; margin-top: 60px;}
form {width: 620px; margin: auto; font-family: times; font-size: 12pt;}
fieldset {width: 620px; padding-left: 10px; background-color: #f0fff0; border: 1px solid #87ceeb;}
legend {font-family: times; font-size: 14pt; color: #00008b; background-color: #87ceeb; padding-left: 3px; padding-right: 3px; margin-bottom: 5px;}
.submitBtn {font-family: tahoma; font-size: 10pt; display: block; margin-left: auto; margin-right: auto; margin-top: 5px; margin-bottom: 5px;}

</style>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>Form</legend>
<select name="firstName">
<option value=""> Make a Selection </option>
<option value="Thomas"> Thomas </option>
<option value="Joseph"> Joseph </option>
<option value="Michael"> Michael </option>
</select>
<input type="text" name="lastName" value="Smith">
<input type="submit" name="submit" value="Submit" class="submitBtn">
</fieldset>
</form>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum