javascript cookie + display in form

37 New Member

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

Subscribe Reply

2166

Logician

210

New Member

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

848lu

New Member

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

848lu

New Member

anyone please help?

Mar 22 '07 #4

acoder

16,027

Recognized Expert Moderator MVP

To change the value of a text box:

Expand|Select|Wrap|Line Numbers

document.form.textbox.value="new value";

Post your code so we can suggest changes.

Mar 22 '07 #5

848lu

New Member

To change the value of a text box:

Expand|Select|Wrap|Line Numbers

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

 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.name_form.Name_textfield.value

        //saves it in a cookie userTotalCookie to store

            document.cookie = "userNameCookie=" +USERname+ ";expires=" + expire.toGMTString()
 
         USERHouseNo = document.name_form.HouseNo_textfield.value

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

and this to retrieve it

Expand|Select|Wrap|Line Numbers

 POS =  document.cookie.indexOf("USERname") 

TotalString = document.cookie.substring(POS+19,POS+16)
 
POS =  document.cookie.indexOf("USERHouseNo") 

TotalTicket = document.cookie.substring(POS+15,POS+16)
 
FORM NAME = myForm.Street_textfield.writeln(+ USERname )

Mar 22 '07 #6

acoder

16,027

Recognized Expert Moderator MVP

Read about setting and reading cookies here.

To set the value of the text field, try:

Expand|Select|Wrap|Line Numbers

document.myForm.street_Textfield.value=readCookie('USERname');

where readCookie is the function defined in that link.

Mar 23 '07 #7

848lu

New Member

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

16,027

Recognized Expert Moderator MVP

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

848lu

New Member

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

848lu

New Member

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

1,208

Recognized Expert Top Contributor

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

848lu

New Member

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

16,027

Recognized Expert Moderator MVP

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

window.onload=loadCookie;

where loadCookie is the name of your function.

Mar 27 '07 #14

848lu

New Member

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

16,027

Recognized Expert Moderator MVP

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

848lu

New Member

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

16,027

Recognized Expert Moderator MVP

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

848lu

New Member

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

16,027

Recognized Expert Moderator MVP

Are you sure you've got the div object first using getElementById as I've shown above?

Then:

Expand|Select|Wrap|Line Numbers

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

javascript cookie + display in form

Similar topics