Page 1 of 1

Set Cookies on Bootstrap 5.3 With Checkbox

Posted: Wed Dec 06, 2023 5:47 pm
by Kosmito
The code is using a form and a simple disable script with the cookie check

This is the Form on HTML

Code: Select all

<form class="needs-validation" id="disclamer" novalidate>
                <span class="disclamer"> 
                  <p><b>US Citizen or resident</b></p>      
                  <p>I am not a U.S Citizen or resident.</p>
                  <p><b>Calculator Statement</b></p>
                  <p>I understand that the calculator statement is for estimation purposes only and does not guarantee the advertised ROI.</p> 
                  <p><b>VLND token liquidity & chain</b></p>
                  <p>I understand that the VLND token will be minted to my polygon address amd will initially be illiquid</p> 
                </span>
                <div class="form-check mb-3">
                  <input class="form-check-input" name='visto' id="validation" type="checkbox" value="" id="invalidCheck" required>
                  <label class="form-check-label" for="validation">
                    I have read the above.
                  </label>
                  <div class="valid-feedback">Valid.</div>
                  <div class="invalid-feedback">Check this checkbox to continue.</div>
                </div>
               <input type='submit' class='btn-confirm-disclamer mb-3' id="save" value='I understand, i’m a degen.'>
            </form>
This are the script we are using

Code: Select all

<script>
$(document).ready(function(){
    $('#save').prop('disabled', true);

    $('#validation').click(function(){
        if($(this).is(':checked'))
        {
            $('#save').prop('disabled', false);
        }
        else
        {
            $('#save').prop('disabled', true);
        }
    });
});
</script>
<script type="text/javascript">
$(document).ready(function() { 
    var cookie = false;
    var cookieContent = $('.cookie-disclaimer');

    checkCookie();

    if (cookie === true) {
      cookieContent.hide();
    }

    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;
    }

    function getCookie(cname) {
      var name = cname + "=";
      var ca = document.cookie.split(';');
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
      }
      return "";
    }

    function checkCookie() {
      var check = getCookie("acookie");
      if (check !== "") {
        return cookie = true;
      } else {
        var myModal = new bootstrap.Modal(document.getElementById('disclamer'), {})
myModal.toggle()
      }
      
    }
    $('form').submit(function () {
      setCookie("acookie", "accepted", 365);
      cookieContent.hide(500);
    });
});
    </script>
The First Scripts is for disable the submit button this way we can block the funtions and they can send the message before check the box

the Second script is the cookie check and generator