Uncaught ReferenceError: cookie is not defined

Question

I'm working on age verification modal, using bootstrap 5, moment.js library on a Wordpress site, The problem is when check if cookie for validAge exists, if exist hide the modal panel but if doesn't exist so lets make them enter a date birthday. I'm not sure how setup the cookie correctly The modal work fine without using cookie verification.

$(document).ready(function () {
  var age = {};

  // For use without cookies
  $("#ageModal").modal("show");
  initAge();

    // check if cookie for validAge exists..
  if (cookie.get('validAge') == 'true') {
    return true;
  } else {
    // doesn't exist so lets make them enter a birthday...
    $('#ageModal').modal('show');
    initAge();
  }

  // starts the age verification process
  function initAge() {
    var month = 0;
    var day = 0;
    var year = 0;

    $("#age-submit").on("click", function () {
      age["month"] = $("#verify-month").val();
      age["day"] = $("#verify-day").val();
      age["year"] = $("#verify-year").val();
      checkDate();
    });
  }

  // Check to see if user entered a valid date...
  function checkDate() {
    if (age.month == "none" || age.day == "none" || age.year == "none") {
      // Fade in the error...
      $("#modal-error").css("visibility", "visible").hide().fadeIn("slow");

      // changes the background color of the select if invalid
      if (age.month == "none") {
        $("#verify-month").css("background", "rgba(223,32,44,0.5)");
        // Look for change of value and change background color when valid
        $("#verify-month").on("change", function () {
          if ($("#verify-month").val() == "none") {
            $("#verify-month").css("background", "rgba(223,32,44,0.5)");
          } else {
            $("#verify-month").css("background", "white");
          }
        });
      }

      // changes the background color of the select if invalid
      if (age.day == "none") {
        $("#verify-day").css("background", "rgba(223,32,44,0.5)");
        // Look for change of value and change background color when valid
        $("#verify-day").on("change", function () {
          if ($("#verify-day").val() == "none") {
            $("#verify-day").css("background", "rgba(223,32,44,0.5)");
          } else {
            $("#verify-day").css("background", "white");
          }
        });
      }

      // changes the background color of the select if invalid
      if (age.year == "none") {
        $("#verify-year").css("background", "rgba(223,32,44,0.5)");
        // Look for change of value and change background color when valid
        $("#verify-year").on("change", function () {
          if ($("#verify-year").val() == "none") {
            $("#verify-year").css("background", "rgba(223,32,44,0.5)");
          } else {
            $("#verify-year").css("background", "white");
          }
        });
      }
    } else {
      oldEnough();
    }
  }

  // Compares age entered with todays date 21 years ago...
  function oldEnough() {
    var ageLimit = moment().subtract(21, "years").calendar();
    var birthDate = age.month + " " + age.day + " " + age.year;
    var oldEnough = moment(birthDate, "MM DD YYYY").isBefore(ageLimit, "day");

    if (oldEnough) {
      cookie.set('validAge', 'true');
      $("#ageModal").modal("hide");
    } else {
      cookie.set('validAge', 'false');
      console.log("it is false");
    }
  }
});

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.js"></script>
<div class="modal fade" id="ageModal" role="dialog" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="col-xs-12 hidden-sm hidden-md hidden-lg" id="modal-age-limit">
          <h5><strong>Selecciona la fecha de tu cumpleaños</strong></h5>
        </div>
        
        <div class="row g-3">
        <div class="col">
             <select name="month" class="form-control" id="verify-month">
               <option value="none">-- Mes --</option>
               <option value="1">Enero</option>
               <option value="2">Febrero</option>
               <option value="3">Marzo</option>
               <option value="4">Abril</option>
               <option value="5">Mayo</option>
               <option value="6">Junio</option>
               <option value="7">Julio</option>
               <option value="8">Agosto</option>
               <option value="9">Septiembre</option>
               <option value="10">Octubre</option>
               <option value="11">Noviembre</option>
               <option value="12">Diciembre</option>
             </select>  
        </div>
        <div class="col">
           <select name="day" class="form-control" id="verify-day">
          <option value="none">-- Día --</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
          <option value="4">4</option>
          <option value="5">5</option>
          <option value="6">6</option>
          <option value="7">7</option>
          <option value="8">8</option>
          <option value="9">9</option>
          <option value="10">10</option>
          <option value="11">11</option>
          <option value="12">12</option>
          <option value="13">13</option>
          <option value="14">14</option>
          <option value="15">15</option>
          <option value="16">16</option>
          <option value="17">17</option>
          <option value="18">18</option>
          <option value="19">19</option>
          <option value="20">20</option>
          <option value="21">21</option>
          <option value="22">22</option>
          <option value="23">23</option>
          <option value="24">24</option>
          <option value="25">25</option>
          <option value="26">26</option>
          <option value="27">27</option>
          <option value="28">28</option>
          <option value="29">29</option>
          <option value="30">30</option>
          <option value="31">31</option>
          </select>
        </div>
        <div class="col">
          <select name="Year" class="form-control" id="verify-year">
                                          <option value="none">-- Año --</option>
                                          <option value="1933">1933</option>
                                          <option value="1934">1934</option>
                                          <option value="1935">1935</option>
                                          <option value="1936">1936</option>
                                          <option value="1937">1937</option>
                                          <option value="1938">1938</option>
                                          <option value="1939">1939</option>
                                          <option value="1940">1940</option>
                                          <option value="1941">1941</option>
                                          <option value="1942">1942</option> 
                                          <option value="1943">1943</option>
                                          <option value="1944">1944</option>
                                          <option value="1945">1945</option>
                                          <option value="1946">1946</option>
                                          <option value="1947">1947</option>
                                          <option value="1948">1948</option>
                                          <option value="1949">1949</option>
                                          <option value="1950">1950</option>
                                          <option value="1951">1951</option>
                                          <option value="1952">1952</option>
                                          <option value="1953">1953</option>
                                          <option value="1954">1954</option>
                                          <option value="1955">1955</option>
                                          <option value="1956">1956</option>
                                          <option value="1957">1957</option>
                                          <option value="1958">1958</option>
                                          <option value="1959">1959</option>
                                          <option value="1960">1960</option>
                                          <option value="1961">1961</option>
                                          <option value="1962">1962</option>
                                          <option value="1963">1963</option>
                                          <option value="1964">1964</option>
                                          <option value="1965">1965</option>
                                          <option value="1966">1966</option>
                                          <option value="1967">1967</option>
                                          <option value="1968">1968</option>
                                          <option value="1969">1969</option>
                                          <option value="1970">1970</option>
                                          <option value="1971">1971</option>
                                          <option value="1972">1972</option>
                                          <option value="1973">1973</option>
                                          <option value="1974">1974</option>
                                          <option value="1975">1975</option>
                                          <option value="1976">1976</option>
                                          <option value="1977">1977</option>
                                          <option value="1978">1978</option>
                                          <option value="1979">1979</option>
                                          <option value="1980">1980</option>
                                          <option value="1981">1981</option>
                                          <option value="1982">1982</option>
                                          <option value="1983">1983</option>
                                          <option value="1984">1984</option>
                                          <option value="1985">1985</option>
                                          <option value="1986">1986</option>                  
                                          <option value="1987">1987</option>
                                          <option value="1988">1988</option>
                                          <option value="1989">1989</option>
                                          <option value="1990">1990</option>
                                          <option value="1991">1991</option>
                                          <option value="1992">1992</option>
                                          <option value="1993">1993</option>
                                          <option value="1994">1994</option>
                                          <option value="1995">1995</option>
                                          <option value="1996">1996</option>
                                          <option value="1997">1997</option>
                                          <option value="1998">1998</option>
                                          <option value="1999">1999</option>
                                          <option value="2000">2000</option>
                                          <option value="2001">2001</option>
                                          <option value="2002">2002</option>
                                          <option value="2003">2003</option>
                                          <option value="2004">2004</option>
                                          <option value="2005">2005</option>
                                          <option value="2006">2006</option>
                                          <option value="2007">2007</option>
                                          <option value="2008">2008</option>
                                          <option value="2009">2009</option>
                                          <option value="2010">2010</option>
                                          <option value="2011">2011</option>
                                          <option value="2012">2012</option>
                                          <option value="2013">2013</option>
                                          <option value="2014">2014</option>
                                    </select>
                         </div> <!-- ultimo select -->
                  </div><!-- row -->

      </div><!-- modal body --> 

        <div class="modal-footer">
                      
              <div class="" id="age-submit-area">
                    <a href="#" class="btn btn-success btn-primary" id="age-submit">Enviar</a>
              </div>
              <div class="" id="modal-error" style="visibility: hidden">
                    <h4 style=""><strong>Por favor ingresa una fecha valida</strong></h4>
              </div> 
              <div class="">
                  <h6 class=""><strong>DEBES SER MAYOR DE 18 PARA INGRESAR</strong></h6>
                  <p>Allow us to check your age as part of our commitment to responsible drinking.</p>
              </div>
         </div>

    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="container">
  
  <h1>hola amigo como estas?</h1>
</div>

score 0 · Answer 1 · answered Sep 19 '21 at 05:09

0

To get cookies in javascript try like this let x = document.cookie;

check this link, hope you will get something from there. https://www.w3schools.com/js/js_cookies.asp

answered Sep 19 '21 at 05:09

Rohan Jadhav

48
7

Thanks for your answer, I saw the link before, i am stuck on how to implement the setcookie, getcookie and checkcookie. i'm novy in javascript, sorry and Thanks. – Omar Giancarlo Sep 19 '21 at 14:39

Uncaught ReferenceError: cookie is not defined

1 Answers1