I've been having a lot of trouble understanding cookies and my assignment is due in an hour

Question

I have a form that should save what the user inputs into the form fields using cookies. However I've been doing a lot of research and I'm just not understanding how to apply cookies to my form. UGH! Here are the directions to the assignment "Create a document with a form for reserving a rental car. As a user creates a reservation, store cookies containing the user’s reservation information, including name and address, telephone, pickup and return dates, and car type. Also, create a button that redisplay a user’s reservation information with an alert message. Set the cookies so that they expire one day after a visit. Save the document as CarRentals. html."

And here is my code

    <!DOCTYPE Public>

<html>
    <head>
       <meta charset="utf-8">
       <link rel="stylesheet" type="text/css" media="all">
       <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,400" rel="stylesheet" type="text/css">
       <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" type="text/css">
       <title>Rental Car Reservation</title>
    </head>

<body>  
   <script type = "text/javascript">
     function SaveInformation() {
     localStorage.formInfo = document.getElementByID("select").value;
     document.option = localStorage.formInfo;
     }

     function Submit() {
       var form = document.register;
         if (form.fname.value == "First Name"
         || form.lname.value == "Last Name"
         || form.address.value == "Address"
         || form.address.value == ""
         || form.telephone.value == "(555)555-5555"
         || form.pickupdate.value == "MM/DD/YYYY"
         || form.returndate.value == "MM/DD/YYYY"
         || form.cartype.value == "ex. Acura, Nissan, Ford etc."
         || form.classificationselection.value == "") {
         return false;
         }
         else
            return true;
      }

      function Reset(){
        window.alert("Are you sure you would like to reset all fields?");
      }
</script>

<h1>Rental Car Reservation Page</h1>
<form name="register" method="get" onsubmit="return Submit(); return Save Information()" onreset="return Reset()" action="FormProcessor.html">

<h3>Personal Information</h3>
    <form method="post">
Name:<br>
<input type="text" name="fname" placeholder="First Name" pattern="[a-zA-Z]{2,15}" required/>
<input type="text" name="lname" placeholder="Last Name" pattern="[a-zA-Z]{2,15}" required/>
<br>

Address:<br>
<input name="address" placeholder="Address" required/>
<br>

Phone Number:<br>
<input name="telephone" placeholder="555-555-5555" pattern="\d{3}[\-]\d{3}[\-]\d{4}"/>
<br>

<h3>Reservation Information</h3>

Pickup Date:<br>
<input type="text" name="pickupdate" placeholder="MM/DD/YYYY" pattern="(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d" required/>
<br>

Return Date:<br>
<input type="text" name="returndate" placeholder="MM/DD/YYYY" pattern="(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d" required/>

<br>

Car Type:<br>
<input name="cartype" placeholder="ex. Acura, Nissan, Ford etc." required/>
<br>

Car Classification:<br>
<select name="classificationselection" id="select" required><br>
<option value=0>Compact</option>
<option value=1>Sedan</option>
<option value=2>Sports</option><br>
<option value=3>Luxury</option><br>
<option value=4>Wagon</option><br>
<option value=5>Muscle</option><br>
<option value=6>Supercar</option><br>
<option value=7>SUV</option><br>
<option value=8>Van</option><br>
<option value=9>Convertable</option><br>
</select><br>

<input type="submit" value="Submit"/>
</body>
</html>

Have you tried looking at some cookie plugins? like this one: https://github.com/carhartl/jquery-cookie — vprasad, Mar 05 '14 at 04:21
You will fail this assignment. But next time you will know that it makes sense to start doing it earlier. — zerkms, Mar 05 '14 at 04:21
possible duplicate of [How can I store cookies from a registration form?](http://stackoverflow.com/questions/22180216/how-can-i-store-cookies-from-a-registration-form) — zerkms, Mar 05 '14 at 04:22
Hey! I've been working on this for a week and I've asked questions about this particular assignment multiple times but I received few answers that weren't even useful. Don't be so quick to judge, I just need help. — Travis, Mar 05 '14 at 04:23
try to search for a cookie plugin my advice to u `serialize` all forum inputs in one cookie then `unserialize` the cookie and set the values when user reload the page — Kodr.F, Mar 05 '14 at 04:25
ill re-write your code using jQuery cookie plugin ill post my answer when i done — Kodr.F, Mar 05 '14 at 04:27

score 0 · Answer 1 · edited May 23 '17 at 12:28

You need to create a cookie for each piece of data and set it's expiry is one day from "now". I'll give you a start;

/* Function to set a cookie */
function setCookie(cname, cvalue, exdays)
{
    var d = new Date();
    d.setTime(d.getTime()+(exdays*24*60*60*1000));
    var expires = "expires="+d.toGMTString();
    document.cookie = cname + "=" + cvalue + "; " + expires;
} 

/* Set cookies with all of the data */
setCookie("carType", "BMW", 1);  // Sets a cookie with the car name
// Create cookies for the rest of data here now

/* Function to reads a cookie and print it when the person clicks the button */
function readCookie(cname)
{
    // You do this
}

/* When the button is clicked, read all variables */
var carType = readCookie("carType");
// read in the rest of variables now

// Print the values

If you carefully go through these resources, you'll find all the answers:

score 0 · Accepted Answer · answered Mar 05 '14 at 05:38

Just for helping you to understand more about javascript and jquery I've modified your code

plz try it now

<!DOCTYPE Public>

<html>
    <head>
       <meta charset="utf-8">
       <link rel="stylesheet" type="text/css" media="all">
       <link href="http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,400" rel="stylesheet" type="text/css">
       <link href="http://fonts.googleapis.com/css?family=Open+Sans:300,400" rel="stylesheet" type="text/css">
       <title>Rental Car Reservation</title>
    </head>

<body>

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load("jquery", "1");
</script>

<script type="text/javascript">


     var cookieName = "MyForomCookie";
     //save forum inputs in one cookie
     function saveme()
     {
        //get forum
        var form = $('#my-form');
        //Serialize forum inputs
        var elements = form.serialize();
        //Save all inputs in one cookie
        setCookie(cookieName,elements, 1);

      return false;
     }

     /* Function to set a cookie */
     function setCookie(cname, cvalue, exdays)
     {
         var d = new Date();
         d.setTime(d.getTime()+(exdays*24*60*60*1000));

         var expires = "expires="+d.toGMTString();
         document.cookie = cname + "=" + cvalue + "; " + expires;
      }

     var docCookies = {
          getItem: function (sKey) {
           return decodeURIComponent(document.cookie.replace(new RegExp("(?:(?:^|.*;)\\s*" + encodeURIComponent(sKey).replace(/[\-\.\+\*]/g, "\\$&") + "\\s*\\=\\s*([^;]*).*$)|^.*$"), "$1")) || null;
     },}


$( document ).ready(function() {

     //now restore data on load page
     var myInput = docCookies.getItem(cookieName);


   if ( myInput != null )
   {
     var myInputs = myInput.split('&');

    var i = 0;
    while(i < myInputs.length)
    {
      var input = myInputs[i].split('=');

     $("input[name="+input[0]+"]").val(input[1]);
      i++;
    }
   }
});
</script>

<h1>Rental Car Reservation Page</h1>


<form name="register" id="my-form" method="get" onsubmit="return saveme();" onreset="return Reset();">

<h3>Personal Information</h3>
<!-- Remove this one we don't need it its wrong to add <form tag inside <form tag
    <form method="post">
-->
Name:<br>
<input type="text" id="fname" name="fname" placeholder="First Name" pattern="[a-zA-Z]{2,15}" required/>
<input type="text" name="lname" placeholder="Last Name" pattern="[a-zA-Z]{2,15}" required/>
<br>

Address:<br>
<input name="address" placeholder="Address" required/>
<br>

Phone Number:<br>
<input name="telephone" placeholder="555-555-5555" pattern="\d{3}[\-]\d{3}[\-]\d{4}"/>
<br>

<h3>Reservation Information</h3>

Pickup Date:<br>
<input type="text" name="pickupdate" placeholder="MM/DD/YYYY" pattern="(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d" required/>
<br>

Return Date:<br>
<input type="text" name="returndate" placeholder="MM/DD/YYYY" pattern="(0[1-9]|1[012])[- /.](0[1-9]|[12][0-9]|3[01])[- /.](19|20)\d\d" required/>

<br>

Car Type:<br>
<input name="cartype" placeholder="ex. Acura, Nissan, Ford etc." required/>
<br>

Car Classification:<br>
<select name="classificationselection" id="select" required><br>
<option value=0>Compact</option>
<option value=1>Sedan</option>
<option value=2>Sports</option><br>
<option value=3>Luxury</option><br>
<option value=4>Wagon</option><br>
<option value=5>Muscle</option><br>
<option value=6>Supercar</option><br>
<option value=7>SUV</option><br>
<option value=8>Van</option><br>
<option value=9>Convertable</option><br>
</select><br>

<input type="submit" value="Submit"/>
<input type="reset" />
</form>
</body>
</html>

I've been having a lot of trouble understanding cookies and my assignment is due in an hour

2 Answers2