By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,838 Members | 1,675 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,838 IT Pros & Developers. It's quick & easy.

javascript cookie + display in form

P: 37
hi, i wanted to display cookie info on a form, as in a text box

ok this is what im doing, im saving all info on a cookie where the users types in i.e. card details.

and at the end i made a confirmation page, where all the info they typed in are here.

so obviously we use cookie, but i wanted to display it in a text box.

how do i do that...


and one more thing, i also added a modify button on the confirmation page, where they can go back and edit, how do i retrieve the cookie to its original page?

please help
Mar 21 '07 #1
Share this Question
Share on Google+
19 Replies


100+
P: 210
hi, i wanted to display cookie info on a form, as in a text box

ok this is what im doing, im saving all info on a cookie where the users types in i.e. card details.

and at the end i made a confirmation page, where all the info they typed in are here.

so obviously we use cookie, but i wanted to display it in a text box.

how do i do that...


and one more thing, i also added a modify button on the confirmation page, where they can go back and edit, how do i retrieve the cookie to its original page?

please help
What aspect is causing a problem: Reading the cookie, parsing its data or writing the data into form elements?
Mar 21 '07 #2

P: 37
well...im habing trouble to display the info into a text file....


also from pull down menu to a text box....
Mar 21 '07 #3

P: 37
anyone please help?
Mar 22 '07 #4

acoder
Expert Mod 15k+
P: 16,027
To change the value of a text box:
Expand|Select|Wrap|Line Numbers
  1. document.form.textbox.value="new value";
Post your code so we can suggest changes.
Mar 22 '07 #5

P: 37
To change the value of a text box:
Expand|Select|Wrap|Line Numbers
  1. document.form.textbox.value="new value";
Post your code so we can suggest changes.

i used this code to store the info in a cookie

Expand|Select|Wrap|Line Numbers
  1. function setCustomer_Details_Cookie()   {
  2.     //works out the time value
  3.             var expire = new Date()
  4.     //gets the time value
  5.             var oneHour = expire.getTime() + (60 * 60 * 1000)
  6.             expire.setTime(oneHour)
  7.         //saves it in a variable called USERTotal 
  8.            USERname = document.name_form.Name_textfield.value
  9.         //saves it in a cookie userTotalCookie to store
  10.             document.cookie = "userNameCookie=" +USERname+ ";expires=" + expire.toGMTString()
  11.  
  12.          USERHouseNo = document.name_form.HouseNo_textfield.value
  13.             document.cookie = "HouseNo=" +USERHouseNo+ ";expires=" + expire.toGMTString()

and this to retrieve it

Expand|Select|Wrap|Line Numbers
  1. POS =  document.cookie.indexOf("USERname") 
  2. TotalString = document.cookie.substring(POS+19,POS+16)
  3.  
  4. POS =  document.cookie.indexOf("USERHouseNo") 
  5. TotalTicket = document.cookie.substring(POS+15,POS+16)
  6.  
  7. FORM NAME = myForm.Street_textfield.writeln(+ USERname )
Mar 22 '07 #6

acoder
Expert Mod 15k+
P: 16,027
Read about setting and reading cookies here.

To set the value of the text field, try:
Expand|Select|Wrap|Line Numbers
  1. document.myForm.street_Textfield.value=readCookie('USERname');
where readCookie is the function defined in that link.
Mar 23 '07 #7

P: 37
nah sorry i cant get it to work....

it says it may not be a object


this is the whole coding of the HTML

[HTML]<html>
<head>
<title>Confirmation Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">



document.HouseNo_textfield.value=readCookie('House No');


</script>
</head>

<body bgcolor="#FFFFCC">
<div id="Layer3" style="position:absolute; left:467px; top:405px; width:90px; height:49px; z-index:5"><a href="online%20new%20-%2007%20-%20Reference.htm"><img src="next_button.gif" width="31" height="21" border="0" align="right"> </a></div>
<div id="Layer1" style="position:absolute; left:16px; top:459px; width:573px; height:7px; z-index:4"><img src="status_06.jpg" width="574" height="55"></div>
<div id="Layer1" style="position:absolute; left:31px; top:72px; width:479px; height:309px; z-index:1">
<pre><font face="Geneva, Arial, Helvetica, sans-serif">Enter Customer details
Address
House no. <input name="HouseNo_textfield" type="text" id="HouseNo_textfield" size="5">
</font><font face="Geneva, Arial, Helvetica, sans-serif">Street <input name="Street_textfield" type="text" id="Street_textfield">
Postcode <input name="Postcode_textfield" type="text" id="Postcode_textfield" size="10">
Contact number <input name="Contact_Number_textfield" type="text" id="Contact_Number_textfield">


Card details
Account holders name <input name="Account_holders_name_textfield" type="text" id="Account_holders_name_textfield2">
Card no. <input name="Card_no_textfield" type="text" id="Card_no_textfield2">
Card expiry date <select name="Card_expiry_month_select" id="select3"><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option></select> <select name="Card_expiry_year_select" id="select4"><option>2007</option><option>2008</option><option>2009</option><option>2010</option></select>
Card start date <select name="Card_start_month_select" id="select5"><option>01</option><option>02</option><option>03</option><option>04</option><option>05</option><option>06</option><option>07</option><option>08</option><option>09</option><option>10</option><option>11</option><option>12</option></select> <select name="Card_start_year_select" id="select6"><option>2007</option><option>2008</option><option>2009</option><option>2010</option></select>
Card sort code <input name="Card_sort_code_textfield" type="text" id="Card_sort_code_textfield4" size="6"> <input name="Card_sort_code_textfield2" type="text" id="Card_sort_code_textfield22" size="6"> <input name="Card_sort_code_textfield3" type="text" id="Card_sort_code_textfield32" size="6">
Card security no. <input name="Card_security_no_textfield" type="text" id="Card_security_no_textfield2" size="6">
Card type <select name="Card_type_select" id="Card_type_select"><option>Visa</option><option>Delta</option><option>Mastro</option><option>Master Card</option><option>Solo</option><option>Visa Electron</option></select>

</font></pre>
</div>
Confirmation
</body>
</html>[/HTML]


and here is where i wanted to insert the data
House no. <input name="HouseNo_textfield" type="text" id="HouseNo_textfield" size="5">
Mar 24 '07 #8

acoder
Expert Mod 15k+
P: 16,027
I assume you've already set the cookie. To check just alert document.cookie to check its contents.

You've not declared a form tag.

For the text field, run that code on page load so that the form exists, or at the bottom of the page. When it comes across the code, the text input box doesn't exist on the page, so it can't be set to the cookie value,
Mar 26 '07 #9

P: 37
ok i still cant get it to work, i have added myForm and also have tried without it...


can you write it for me


im really dumb at this

please i would really appreciate it
Mar 26 '07 #10

P: 37
I assume you've already set the cookie. To check just alert document.cookie to check its contents.

You've not declared a form tag.

For the text field, run that code on page load so that the form exists, or at the bottom of the page. When it comes across the code, the text input box doesn't exist on the page, so it can't be set to the cookie value,

ok this is what i have done now, i made new pages and made the first html page like this (where they enter the details)

<html>
<head>
<title>nter Customer details </title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

function setCustomer_Details_Cookie() {
//works out the time value
var expire = new Date()
//gets the time value
var oneHour = expire.getTime() + (60 * 60 * 1000)
expire.setTime(oneHour)
//saves it in a variable called USERTotal
USERname = document.myForm.Name.value
//saves it in a cookie userTotalCookie to store
document.cookie = "userNameCookie=" +USERname+ ";expires=" + expire.toGMTString()

USERHouseNo = document.myForm.HouseNo.value
document.cookie = "HouseNo=" +USERHouseNo+ ";expires=" + expire.toGMTString()
}

</script>

</head>

<body bgcolor="#FFFFCC">
<FORM NAME=myForm>
<font face="Geneva, Arial, Helvetica, sans-serif">Enter Customer details</font>
<br>
<br>
Name <INPUT SIZE =12 TYPE="text" name="Name">
<br>
<br>
House No <INPUT SIZE =12 TYPE="text" name="HouseNo">
<br>
<br>
<INPUT TYPE="button" VALUE="Process Order"
onClick="setCustomer_Details_Cookie()">

<div id="Layer1" style="position:absolute; left:16px; top:459px; width:573px; height:7px; z-index:4"><img src="status_03.jpg" width="574" height="55"></div>
<div id="Layer3" style="position:absolute; left:467px; top:405px; width:90px; height:49px; z-index:5"><a href="online%20new%20-%2006%20-%20Confirmation.htm"><img src="next_button.gif" width="31" height="21" border="0" align="right" onClick="setCustomer_Details_Cookie()"></a></div>
</FORM>
</body>
</html>


and this is where it displays the data...




<html>
<head>
<title>Confirmation Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">

document.open()
POS = document.cookie.indexOf("userNameCookie")
Name = document.cookie.substring(POS+20,POS+15)

POS = document.cookie.indexOf("HouseNo")
House = document.cookie.substring(POS+12,POS+8)


document.writeln("Name: "+ Name + " House no: "+ House)

document.myForm.Name.value=readCookie("Name");

document.close()
</script>
</head>

<body bgcolor="#FFFFCC">
<FORM NAME=myForm>
Confirmation
<br>
<br>
<br>
Name <INPUT SIZE =12 TYPE="text" name="Name">
<br>
House No <INPUT SIZE =12 TYPE="text" name="HouseNo">
<br>
<br>


<div id="Layer3" style="position:absolute; left:467px; top:405px; width:90px; height:49px; z-index:5"><a href="online%20new%20-%2007%20-%20Reference.htm"><img src="next_button.gif" width="31" height="21" border="0" align="right"> </a></div>
<div id="Layer1" style="position:absolute; left:16px; top:459px; width:573px; height:7px; z-index:4"><img src="status_06.jpg" width="574" height="55"></div>

</FORM>
</body>
</html>

it worked fine, like it displayes what i typed in the 1st page, after i entered this but,


document.myForm.Name.value=readCookie("Name");
it says it is not a object
Mar 26 '07 #11

iam_clint
Expert 100+
P: 1,208
don't make the textfields name Name because it is ambiguous change it to like fname or something then it will work.
Mar 26 '07 #12

P: 37
don't make the textfields name Name because it is ambiguous change it to like fname or something then it will work.
nah sorry it still dont work....

hey can anyone do this....

display the data but add new lines to it...the only one that i know of is \n and i have tried it like this...

document.writeln("Name: "+ Name + " \nHouse no: "+ House)
and
document.writeln("Name: "+ Name)
document.writeln("House no: "+ House)

but still don't show, it says...
document.myForm.CustomerName is null or not an object
Mar 26 '07 #13

acoder
Expert Mod 15k+
P: 16,027
Why are using document.open() and close()?

The reason why you get the error is that the object/form does not exist.

You have to run the code on page load. Put it all in a function, then call it on body load, e.g.
Expand|Select|Wrap|Line Numbers
  1. window.onload=loadCookie;
where loadCookie is the name of your function.
Mar 27 '07 #14

P: 37
ok

i found another way....
this is very intresting, the way it is layed out....

document.open()
POS = document.cookie.indexOf("userNameCookie")
Name = document.cookie.substring(POS+30,POS+15)
POS = document.cookie.indexOf("HouseNo")
House = document.cookie.substring(POS+12,POS+8)
POS = document.cookie.indexOf("StreetName")
StreetName = document.cookie.substring(POS+23,POS+11)
POS = document.cookie.indexOf("Postcode")
Postcode = document.cookie.substring(POS+15,POS+9)
POS = document.cookie.indexOf("ContactNo")
ContactNo = document.cookie.substring(POS+21,POS+10)
POS = document.cookie.indexOf("EmergencyNo")
EmergencyNo = document.cookie.substring(POS+23,POS+12)

POS = document.cookie.indexOf("Card")
Card = document.cookie.substring(POS+15,POS+7)

POS = document.cookie.indexOf("expirydate")
expirydate = document.cookie.substring(POS+15,POS+11)

POS = document.cookie.indexOf("startdate")
startdate = document.cookie.substring(POS+14,POS+10)

POS = document.cookie.indexOf("sortcode")
sortcode = document.cookie.substring(POS+14,POS+10)

POS = document.cookie.indexOf("securityno")
securityno = document.cookie.substring(POS+13,POS+9)

POS = document.cookie.indexOf("Cardtype")
Cardtype = document.cookie.substring(POS+26,POS+12)

document.writeln("Confirmation");
document.writeln("<br/>");
document.writeln("<br/>");
document.writeln("Name: "+ Name );
document.writeln("<br/>");
document.writeln("<br/>");
document.writeln("House no: "+ House);
document.writeln("<br/>");
document.writeln("Street: " +StreetName );
document.writeln("<br/>");
document.writeln("Postcode: "+ Postcode);
document.writeln("<br/>");
document.writeln("Contact No: "+ ContactNo );
document.writeln("<br/>");
document.writeln("Emergency No: "+ EmergencyNo);
document.writeln("<br/>");
document.writeln("<br/>");
document.writeln("Card Details");

document.writeln("<br/>");
document.writeln("Card No.: "+ Card);
document.writeln("<br/>");
document.writeln("Expiry date: "+ expirydate);
document.writeln("<br/>");
document.writeln("Start date: "+ startdate);
document.writeln("<br/>");
document.writeln("Sort code: "+ sortcode);
document.writeln("<br/>");
document.writeln("Security no: "+ securityno);
document.writeln("<br/>");
document.writeln("Card type: "+ Cardtype);
document.writeln("<br/>");


document.close()

so it works...as long as it displayes the data it ok i guess...but i have to admit this site is really cool....like the people here really good help keep it up...
Mar 27 '07 #15

acoder
Expert Mod 15k+
P: 16,027
Oh right, you just needed to display on the screen. I thought you wanted to specifically display in a form. At least you got it working.
Mar 27 '07 #16

P: 37
Oh right, you just needed to display on the screen. I thought you wanted to specifically display in a form. At least you got it working.

wow i was gonna post the same situation now...yes that is what i wanted at first, but realised its going to be kinda long so i just done it like this...

now to show improvments on my assignment i have to show the same info in a layer....

document.writeln("Confirmation");
document.writeln("<br/>");
document.writeln("<br/>");
document.writeln("Name: "+ Name );
document.writeln("<br/>");
document.writeln("<br/>");
document.writeln("House no: "+ House);
document.writeln("<br/>");
document.writeln("Street: " +StreetName );
document.writeln("<br/>");
document.writeln("Postcode: "+ Postcode);
document.writeln("<br/>");
document.writeln("Contact No: "+ ContactNo );
document.writeln("<br/>");
document.writeln("Emergency No: "+ EmergencyNo);
document.writeln("<br/>");
document.writeln("<br/>");
document.writeln("Card Details");

document.writeln("<br/>");
document.writeln("Card No.: "+ Card);
document.writeln("<br/>");
document.writeln("Expiry date: "+ expirydate);
document.writeln("<br/>");
document.writeln("Start date: "+ startdate);
document.writeln("<br/>");
document.writeln("Sort code: "+ sortcode);
document.writeln("<br/>");
document.writeln("Security no: "+ securityno);
document.writeln("<br/>");
document.writeln("Card type: "+ Cardtype);
document.writeln("<br/>");


i'm thinking the codes above won't work....damn i hate javascript man


please help me moderator.......
Mar 27 '07 #17

acoder
Expert Mod 15k+
P: 16,027
To show information in a layer, put a div on the screen:
[HTML]<div id="showData"></div>[/HTML] then to make it easier just write the javascript within the page where you need it after the div.

[HTML]<script type="text/javascript>
// get the object
var dataDiv = document.getElementById("showData");
dataDiv.innerHTML = ...//your data goes here[/HTML]
Mar 28 '07 #18

P: 37
To show information in a layer, put a div on the screen:
[HTML]<div id="showData"></div>[/HTML] then to make it easier just write the javascript within the page where you need it after the div.

[HTML]<script type="text/javascript>
// get the object
var dataDiv = document.getElementById("showData");
dataDiv.innerHTML = ...//your data goes here[/HTML]
i cant get this to work
dataDiv.innerHTML = ...
can you give me an example
Mar 28 '07 #19

acoder
Expert Mod 15k+
P: 16,027
Are you sure you've got the div object first using getElementById as I've shown above?

Then:
Expand|Select|Wrap|Line Numbers
  1. dataDiv.innerHTML = "your string";
should work fine, but remember that you have to have the div too. Show your code if you still have problems.
Mar 29 '07 #20

Post your reply

Sign in to post your reply or Sign up for a free account.