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 4 of 4
  1. #1
    New Coder
    Join Date
    Mar 2013
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Angry JavaScript Cookies

    Hi everyone... I've been poking around at this for a couple of days now and can't seem to figure it out. The instructions I'm being given are "Complete the setCookies() function so cookies are set for each of the fields on the form. Set an expiration date of one week from the current day.
    Complete the displayCookies() function so that the form fields are repopulated from the cookie values."

    I'm sure I'm way off and overlooking quite a few things... JavaScript cookies are extremely confusing to me. Anyone have any thoughts on this? (Code below)




    Code:
    <!DOCTYPE html>
    <html lang="en">
    <head>
    	<title>CSIS 228 Car Rental</title>
    	<meta charset="utf-8">
    	<script type="text/javascript">
    function setCookies()
    		{
    		var myDate = new Date();
            myDate.setDate(myDate.getDate() + 7);
            var inDate = new Date();
            var outDate = new Date();
    		document.cookie = encodeURI("txtName=" + document.forms[0].txtName.value)
                    + ";expires=" + myDate.toUTCString();
            document.cookie = encodeURI("txtAddress=" + document.forms[0].txtAddress.value)
                    + ";expires=" + myDate.toUTCString();
            document.cookie = encodeURI("address1=" + document.forms[0].address1.value)
                    + ";expires=" + myDate.toUTCString();
            document.cookie = encodeURI("txtCity=" + document.forms[0].txtCity.value)
                    + ";expires=" + myDate.toUTCString();
            document.cookie = encodeURI("txtState=" + document.forms[0].txtState.value)
                    + ";expires=" + myDate.toUTCString();
            document.cookie = encodeURI("txtZip=" + document.forms[0].txtZip.value)
                    + ";expires=" + myDate.toUTCString();
    		document.cookie = encodeURI("txtEmail=" + document.forms[0].txtEmail.value)
                    + ";expires=" + myDate.toUTCString();
            document.cookie = encodeURI("txtCarType=" + document.forms[0].txtCarType.value)
                    + ";expires=" + myDate.toUTCString();
            document.cookie = encodeURI("txtPickupDate=" + document.forms[0].txtPickupDate.value)
                    + ";expires=" + myDate.toUTCString();
    		document.cookie = encodeURI("txtReturnDate=" + document.forms[0].txtReturnDate.value)
                    + ";expires=" + myDate.toUTCString();
    			// this function will set cookies for each field in the reservation form, and set them to expire after one day
    			
    			
    			
    			alert ("Your reservation has been saved.");
    			
    		} // end function setCookies()
    		
    		function displayCookies()
    		{
    			// this function will read the saved cookies, and repopulate the form with the cookie values
    			
    			var cookieString = decodeURIComponent(document.cookie);
    			var cookieArray = cookieString.split("; ");
    			
    			if (document.cookie == 0)
    			{
    				alert("You have not made a reservation");
    			}
    			else
    			{
    				var savedData = decodeURI(document.cookie);
                    var dataArray = savedData.split(";");
                    var messageString = "Existing reseration:\n";
                    for (var i = 0; i < dataArray.length; ++i) {
                            messageString += dataArray[i] + "\n";
                    }
                    alert(messageString);
    				
    				// retrieve each cookie, and display the cookie value in the appropriate form field
    			
    			
    			
    			
    			
    			
    			
    			
    			
    			}
    			
    		} // end function displayCookies()
    	
    	</script>
    </head>
    
    <body>
    <h1>CSIS 228 Car Rental</h1>
        <form name="frmRental" method="post">
            Name:<br>
            <input type="text" name="txtName" size="20" maxlength="25"><br>
            Address:<br>
            <input type="text" name="txtAddress" size="20" maxlength="25"><br>
            City:<br>
            <input type="text" name="txtCity" size="20" maxlength="25"><br>
            State:<br>
            <input type="text" name="txtState" size="2" maxlength="2"><br>
            Zip:<br>
            <input type="text" name="txtZip" size="5" maxlength="5"><br>
            E-Mail Address:<br>
            <input type="email" name="txtEmail" size="20" maxlength="25"><br>
            Car Type:<br>
            <input type="text" name="txtCarType" size="20">
            <br>
            Pickup Date:
            <br>
            <input type="date" name="txtPickupDate" size="10">
            <br>
            Return Date:
            <br>
            <input type="date" name="txtReturnDate" size="10">
            <br><br>
            <input type="button" name="btnSave" value="Save Reservation" onClick="setCookies()"> 
            <input type="reset" value="Reset Form"> 
            <input type="button" name="btnRedisplay" value="Redisplay Reservation" onClick="displayCookies()">
        </form>
    
    </body>
    
    </html>

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,735
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    See anything wrong here?

    document.cookie = encodeURI("address1=" + document.forms[0].address1.value) + ";expires=" + myDate.toUTCString();


    Hint: Use your error console! Or place alerts at strategic positions to inspect the values. I advised you to do this in another thread.
    I exposed your error in 30 seconds - not a couple of days!!! Are you planning to follow my advice in future?


    You must now

    // retrieve each cookie, and display the cookie value in the appropriate form field
    That is only a short step as you have retrieved the cookie data already.


    Of course, any practical application will require extensive validation of the input data. As it is even blank fields are accepted.


    All the misery this world contains comes from seeking pleasure for oneself; all the joy this world contains comes from seeking happiniess for others. - Buddist aphorism
    Last edited by Philip M; 04-03-2013 at 08:37 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New Coder
    Join Date
    Mar 2013
    Posts
    13
    Thanks
    1
    Thanked 0 Times in 0 Posts
    I've experimented with the error console in Chrome and I've never been able to get it to functionally reliably. In fact, I just tried it again and used a tutorial on the google dev tools web site. I guess soon I'm just going to have to sit down with it and play with it until I figure it out. I have my code pasted on the console, but running it and error-checking it is the step I'm having a hard time finding. I write my code in Dreamweaver typically, but unfortunately, it checks syntax only. I've worked with Dreamweaver a lot in the past, so it feels natural to me.

    It looks like that line you flagged above was not needed. Forgot to delete that one. Oops. Could you show me how to retrieve the cookie data for the first form field to get me started? I've been looking in our book for the class, but it's essentially useless. I'm still taking stabs at it though.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,735
    Thanks
    202
    Thanked 2,508 Times in 2,486 Posts
    Quote Originally Posted by jbp82 View Post
    I write my code in Dreamweaver typically, but unfortunately, it checks syntax only. I've worked with Dreamweaver a lot in the past, so it feels natural to me.
    As Old Pedant said recently, "It may or may not come as a surprise to you, but NightmarishStalker (the much more descriptive name for DreamWeaver) produces about the worst and most out of date JavaScript code possible. Such as new String(). Nobody that I know of in this forum is really willing to tackle DrunkWhomper code. We all prefer to just toss it out and use *GOOD* code."

    The details of a saved reservation are shown in alert(messageString);
    which is arrived at with

    for (var i = 0; i < dataArray.length; ++i) {
    messageString += dataArray[i] + "\n";
    }

    Surely you can now place these values in the form fields?

    Code:
    var please = false;
    var thanks = false;
    if (!please && !thanks) {
    var interestLost = true;
    var moreHelp = 0;
    }

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • Users who have thanked Philip M for this post:

    jbp82 (04-06-2013)


  •  

    Posting Permissions

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