CODEWITHSUNDEEP
javascripthtmlcookies
Matt
Matt

Reputation: 81

javascript Using cookie to pass variables to another page

I'm using javascript for the first time and am trying to pass variables to another page via a cookie. However it doesn't appear to be working. Right now I'm just trying to check the cookie value using an alert box. I've looked but haven't been able to find anything that can help me figure out what's going wrong. I was originally trying to implement the solution from this page: How to use JavaScript to fill a form on another page

Any help is appreciated.

My code for the first page is:

<!DOCTYPE html>
<html lang="en">

 <!--Matt Proctor -->
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

   <link rel="stylesheet/less" type="text/css" href="dealership.less">
   <script src="less.js" type="text/javascript"></script>


</head>

<body>
   <script>

   //validate name
   function checkName() {
   var lastN = document.getElementById('lName').value;
   var firstN = document.getElementById('fName').value;
   if (lastN == "" || firstN == "" || (/[^A-Za-z]/.test(lastN)) || (/[^A-Za-z]/.test(firstN))) {
        window.alert("Please enter ONLY alphabetical characters for First Name AND Last Name");
        return false;
        }
        else{
        return true;
        }

   }
   //check if q1 answered
   function checkQ1() {
    if (document.getElementById('timeButton1').checked == false 
    && document.getElementById('timeButton2').checked == false 
    && document.getElementById('timeButton3').checked == false 
    && document.getElementById('timeButton4').checked == false 
    && document.getElementById('timeButton5').checked == false) {
        window.alert("Please answer question 1"); 
        return false;
        }
        else{
        return true;
        }

    }
    //check if q2 answered
    function checkQ2() {
    if (document.getElementById('vehicleButton1').checked == false 
    && document.getElementById('vehicleButton2').checked == false 
    && document.getElementById('vehicleButton3').checked == false 
    && document.getElementById('vehicleButton4').checked == false 
    && document.getElementById('vehicleButton5').checked == false
    && document.getElementById('vehicleButton6').checked == false
    && document.getElementById('vehicleButton7').checked == false
    && document.getElementById('vehicleButton8').checked == false
    && document.getElementById('vehicleButton9').checked == false
    && document.getElementById('vehicleButton10').checked == false
    && document.getElementById('vehicleButton11').checked == false) {
        window.alert("Please answer question 2"); 
        return false;
        }
        else{
        return true;
        }
    }
    //validate q3
    function checkQ3() {
    var min = document.getElementById('minPriceText').value;
    var max = document.getElementById('maxPriceText').value;
    if (min == "" || (/[^0-9]/.test(min)) || max == "" || (/[^0-9]/.test(max))) {
        window.alert("Please enter a numerical value for both the minimum price and maximum price");
        return false;
        }
        else{
        return true;
        }
    }
    //check q4 answered
    function checkQ4() {
        if (document.getElementById('problemsNo').checked == false 
        && document.getElementById('problemsYes').checked == false) {
        window.alert("Please answer question 4");
        return false;
        }
        else {
        return true;
        }
    }
    //check q5 answered
    function checkQ5() {
        if (document.getElementById('cleanNo').checked == false 
        && document.getElementById('cleanYes').checked == false) {
        window.alert("Please answer question 5")
        return false;
        }
        else {
        return true
        }
    }
    //check q6 answered
    function checkQ6() {
        if (document.getElementById('gasNo').checked == false 
        && document.getElementById('gasYes').checked == false) {
        window.alert("Please answer question 6")
        return false;
        }
        else {
        return true;
        }
    }
    //check q7 answered
    function checkQ7() {
    if (document.getElementById('experience1').checked == false 
    && document.getElementById('experience2').checked == false 
    && document.getElementById('experience3').checked == false 
    && document.getElementById('experience4').checked == false 
    && document.getElementById('experience5').checked == false
    && document.getElementById('experience6').checked == false
    && document.getElementById('experience7').checked == false
    && document.getElementById('experience8').checked == false
    && document.getElementById('experience9').checked == false
    && document.getElementById('experience10').checked == false) {
        window.alert("Please answer question 7")
        return false; 
        }
    else {
    return true;
        }
    }
    //check if all data correct, and then attempt to pass to another webpage via cookie.
    function checkAndPass() {
    var nameCorrect, q1Correct, q2Correct, q3Correect, q4Correct, q5Correct, q6Correct, q7Correct;

    nameCorrect = checkName();
    q1Correct = checkQ1();
    q2Correct = checkQ2();
    q3Correct = checkQ3();
    q4Correct = checkQ4();
    q5Correct = checkQ5();
    q6Correct = checkQ6();
    q7Correct = checkQ7();

    if(nameCorrect==true &&
    q1Correct==true &&
    q2Correct==true &&
    q3Correct==true &&
    q4Correct==true &&
    q5Correct==true &&
    q6Correct==true &&
    q7Correct==true) {

    var name = document.getElementById('fName').value + " " + document.getElementById('lName').value;
    var quest1 = document.querySelector('input[name = "Q1"]:checked').value;
    var quest2 = document.querySelector('input[name = "Q2"]:checked').value;
    var quest3 = document.getElementById('minPriceText').value + "-" + document.getElementById('maxPriceText').value;
    var quest4 = document.querySelector('input[name = "Q4"]:checked').value;
    var quest5 = document.querySelector('input[name = "Q5"]:checked').value;
    var quest6 = document.querySelector('input[name = "Q6"]:checked').value;
    var quest7 = document.querySelector('input[name = "Q7"]:checked').value;
    var commentline = document.getElementById('comments').value;
    document.cookie=name + "," + quest1 + "/" + quest2 + "/" + quest3 + "/" + quest4 + "/" + quest5 "/" + quest6 + "/" + quest7 + "/" + commentline + "; path=/lab5summary.html";
        newSummary();
        }

    }

    function newSummary() {
    window.open('lab5summary.html',
    '_blank');
    }

   </script>

    <img class="displaycenter" src="AcuraLogo.png" alt="Acura Logo">
        <h1 align ="center">After Purchase Customer Survey</h1>

    <div class="customer">
        <h4>Customer Information</h4>
        <br>
        <br>
    First name:<br>
    <input id="fName" type="text" name="firstname" value="">
    <br>
    Last name:<br>
    <input id="lName" type="text" name="lastname" value="">
    </div>
    <br><br>
    <!--Question 1 asking about how long a customer had to wait before an employee assisted them-->
    <div class="border">
    <p> Q1:  What was your approximate wait time before an associate was available to assist you?</p>

        <input id="timeButton1" type="radio" class ="larger" name="Q1" value=".25">15 minutes or less.
        <input id="timeButton2" type="radio" class ="larger" name="Q1" value=".5">30 minutes.
        <input id="timeButton3" type="radio" class ="larger" name="Q1" value=".75">45 minutes.
        <input id="timeButton4" type="radio" class ="larger" name="Q1" value="1">1 hour.
        <input id="timeButton5" type="radio" class ="larger" name="Q1" value="1.5">1 and 1/2 hours or more.

        <p> Q2:  What kind of vehicle(s) were you looking for?</p>

        <input id="vehicleButton1" type="checkbox" class ="larger" name="Q2" value="Sedan"> Sedan
        <input id="vehicleButton2" type="checkbox" class ="larger" name="Q2" value="SUV/Crossover"> SVU/Crossover
        <input id="vehicleButton3" type="checkbox" class ="larger" name="Q2" value="Convertible"> Convertible
        <input id="vehicleButton4" type="checkbox" class ="larger" name="Q2" value="Coupe"> Coupe
        <input id="vehicleButton5" type="checkbox" class ="larger" name="Q2" value="Hatchback"> Sedan
        <input id="vehicleButton6" type="checkbox" class ="larger" name="Q2" value="Hybrid/Electric"> Hybrid/Electric
        <input id="vehicleButton7" type="checkbox" class ="larger" name="Q2" value="Luxury"> Luxury
        <input id="vehicleButton8" type="checkbox" class ="larger" name="Q2" value="Van/Minivan"> Van/Minivan
        <input id="vehicleButton9" type="checkbox" class ="larger" name="Q2" value="Truck"> Truck
        <input id="vehicleButton10" type="checkbox" class ="larger" name="Q2" value="Wagon"> Wagon
        <input id="vehicleButton11" type="checkbox" class ="larger" name="Q2" value="AWD/4WD"> AWD/4WD

        <p> Q3:  What price range were looking for in a vehicle? </p>

        Minimum:  $
        <input id="minPriceText" type="text" name="minprice" value="">
        Maximum:  $
        <input id="maxPriceText" type="text" name="minprice" value="">

        <p> Q4:  Did the vehicle(s) purchased have any problems?</p>
        <input id="problemsNo" type="radio" class ="larger" name="Q4" value="Yes">Yes
        <input id="problemsYes" type="radio" class ="larger" name="Q4" value="No">No

        <p> Q5:  Was the interior of the vehicle clean? </p>
        <input id="cleanYes" type="radio" class ="larger" name="Q5" value="Yes">Yes
        <input id="cleanNo" type="radio" class ="larger" name="Q5" value="No">No

        <p> Q6:  Did the vehicle come with a full tank of gas? </p>
        <input id="gasYes" type="radio" class ="larger" name="Q6" value="Yes">Yes
        <input id="gasNo" type="radio" class ="larger" name="Q6" value="No">No

        <p> Q7:  On the scale from 1 to 10, 1 being extremely unpleasant and
        10 being absolutely perfect, how would you rate your overall experience? </p>

    <input id="experience1" type="radio" class ="larger" name="Q7" value="1">1
    <input id="experience2" type="radio" class ="larger" name="Q7" value="2">2
    <input id="experience3" type="radio" class ="larger" name="Q7" value="3">3
    <input id="experience4" type="radio" class ="larger" name="Q7" value="4">4
    <input id="experience5" type="radio" class ="larger" name="Q7" value="5">5
    <input id="experience6" type="radio" class ="larger" name="Q7" value="6">6
    <input id="experience7" type="radio" class ="larger" name="Q7" value="7">7
    <input id="experience8" type="radio" class ="larger" name="Q7" value="8">8
    <input id="experience9" type="radio" class ="larger" name="Q7" value="9">9
    <input id="experience10" type="radio" class ="larger" name="Q7" value="10">10

        <p> Finally please feel free to leave any other comments about your purchase/purchase-process below: </p>
        <input id="comments" type="textbox" name="comments" value="" size="100">
    </div>

    <br>
    <br>
    <input onclick="checkAndPass()" id="submitButton" class="button1" type="submit" value="Submit">


                </body>


        </html>

The code of the page I'm passing to is:

<!DOCTYPE html>
<html lang="en">

 <!--Matt Proctor -->
<head>
    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">

   <link rel="stylesheet/less" type="text/css" href="dealership.less">
   <script src="less.js" type="text/javascript"></script>


</head>

<body>
<script>
var COOKIES = {};
var cookieStr=document.cookie;
window.alert("Cookie: " + cookieStr);
</script>

    <img class="displaycenter" src="AcuraLogo.png" alt="Acura Logo">
        <h1 align ="center">After Purchase Customer Survey Summary</h1>


    <div class="border">
    <p> Q1:  What was your approximate wait time before an associate was available to assist you?</p>



        <p> Q2:  What kind of vehicle(s) were you looking for?</p>

        <p> Q3:  What price range were looking for in a vehicle? </p>

        Minimum:  $

        Maximum:  

        <p> Q4:  Did the vehicle(s) purchased have any problems?</p>


        <p> Q5:  Was the interior of the vehicle clean? </p>


        <p> Q6:  Did the vehicle come with a full tank of gas? </p>

        <p> Q7:  On the scale from 1 to 10, 1 being extremely unpleasant and
        10 being absolutely perfect, how would you rate your overall experience? </p>


        <p> Finally please feel free to leave any other comments about your purchase/purchase-process below: </p>
    </div>



                </body>


        </html>

Also, for some reason firefox web console seems to think I need to place a semi-colon here in the first page after quest5: 

document.cookie=name + "," + quest1 + "/" + quest2 + "/" + quest3 + "/" + quest4 + "/" + quest5 "/" + quest6 + "/" + quest7 + "/" + commentline + "; path=/lab5summary.html";

As a final note, I can only use javascript for this, not jQuery or PHP.

Upvotes: 0

Views: 2241

Answers (2)

cpugourou
cpugourou

Reputation: 781

You can also use store.js Store.js

And you also probably want to expurge your code by using objects and arrays for ids and variables.

Upvotes: 0

Daniel Sunami
Daniel Sunami

Reputation: 161

In your example is missing a plus sign:

+ quest5+"/" + quest6

Cookies are bound by a domain, so if you open from your file system (e.g file://index.html), it won't work.

If you are on modern browsers, I suggest you use localStorage and sessionStorage. sessionStorage lasts as long as the page is open and localStorage until the browser's cache be cleaned.

Upvotes: 2

Related Questions