'Fire remember me cookie only when user clicks checkbox

Updated Code: thank you for the suggestions so far. Still not working.

I'm trying to add a remember me cookie, but only when the user actually clicks the checkbox. Is this possible? I'm not having any luck with this code. The cookie fires regardless if the checkbox is clicked or not:

JavaScript:
    <script>  
        $('#rememberme').click(function() {

        if ($('#rememberme').is(':checked')) {
            document.cookie="rememberme=yes;domain=.abc.com;path=/"
        localStorage.usrname = $('#username').val();
            localStorage.pass = $('#password').val(); localStorage.chkbx = $('#rememberme').val();
        } 
    else {
            document.cookie="rememberme=no;domain=.abc.com;path=/"
            localStorage.usrname = '';
        localStorage.pass = '';
        localStorage.chkbx = '';
    }
    });
</script>

HTML:
<label class="checkbox" style="border: none;">
    <input type="checkbox" value="rememberme" id="rememberme"> Remember me
</label>
javascripthtml


Solution 1:[1]

Updated Code

$('#rememberme').click(function() {
    if ($('#rememberme').is(':checked')){

  document.cookie = "rememberme=yes;domain=.abc.com;path=/"
  // save username and password
  localStorage.usrname = $('#username').val(); localStorage.pass = $('#pass').val(); localStorage.chkbx = $('#rememberme').val();
}
else {
  document.cookie = "rememberme=no;domain=.abc.com;path=/"
  localStorage.usrname = '';
  localStorage.pass = '';
  localStorage.chkbx = '';
}
});

Solution 2:[2]

tested below code in jsfiddle, hope it works as per your need. Please test it once, and let me know if its working as expected.

https://jsfiddle.net/arivua/xpvt214o/924480/

// set cookie value
function setCookie(key, value) {
  document.cookie = key +"="+ escape(value) +
    ";domain="+ window.location.hostname +
    ";path=/";
}
// delete cookie
function deleteCookie(name) {
  setCookie(name, "");
}

var remember_me_check_box = $("#rememberme")
// handle click and manage cookie
remember_me_check_box.on("click", function(){
  if (remember_me_check_box.is(':checked')) {
    deleteCookie('rememberme');
    setCookie('rememberme', 'yes');
  } else {
    deleteCookie('rememberme');
    setCookie('rememberme', 'no');
  }
})

Solution 3:[3]

The solution was to just set "If" and "else" conditions around the URL that declares rememeberme. However the conditional URL is constructed (notice yes vs no) is handled by the back end folks where I am a front end UI developer.

<script>  
    $('#rememberme').click(function() {

    if ($('#rememberme').is(':checked')) {
        document.cookie="rememberme=yes;domain=.abc.com;path=/";
    } 
else {
        document.cookie="rememberme=no;domain=.abc.com;path=/";
    }
});

Solution 4:[4]

          $('#rememberme').click(function () {
                  if ($('#rememberme').is(':checked')) {
                    document.cookie = "rememberme=yes;path=http://localhost:3000/login/"
                    var u = document.getElementById('email').value;
                    var p = document.getElementById('password').value;
                    var r = document.getElementById('rememberme').value;
        
                    document.cookie = "email=" + u + ";path=http://localhost:3000/login/";
                    document.cookie = "password=" + p + ";path=http://localhost:3000/login/";
                  }
                  else {
                    document.cookie = "rememberme=no;path=http://localhost:3000/login/"
                    document.cookie = "email=;path=http://localhost:3000/login/";
                    document.cookie = "password=;path=http://localhost:3000/login/";
        
                  }
            });
    
     function getcookiedata() {
            var user = getCookie('email');
            var pswd = getCookie('password');
            var remember = getCookie('rememberme');
    
            document.getElementById('email').value = user;
            document.getElementById('password').value = pswd;
            if (remember == 'yes') {
              document.getElementById('rememberme').checked = true;
            } else {
              document.getElementById('rememberme').checked = false;
            }
        }

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






   <input type="checkbox" name="rememberme" id="rememberme">&nbsp Remember Me<br>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 front_end_dev
Solution 2 Ari
Solution 3 Reading_code
Solution 4 Hussain

Related Questions