CODEWITHSUNDEEP
javascriptphp
Dushee
Dushee

Reputation: 255

How to use a cookie to save the clicked value grab the cookie every time the user opens the page

I have following code to highlight table record with three different colors when user click a checkbox. How can I use a cookie to save the clicked value with grab the cookie every time the user opens the page everytime? I haven't no idea how cookies are used. Answer would be really appreciate

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<style>
.highlight-red {
    background-color: red;
}    
.highlight-green {
    background-color: green;
}
.highlight-yellow {
    background-color: yellow;
}    
</style>
<div class="col-lg-10">
    <table id="Table" border="1">
        <tr class="highlight">
        <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
        <td>Click me</td>
        </tr>
        <tr>
        <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
        <td>Click me</td>
        </tr>
        <tr>
        <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
        <td>Click me</td>
        </tr>
    </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>

    function changeSoma(data, color){
            if(data.checked && color == 'red'){
                $(data).parent().parent().addClass("highlight-red");
            }
            else{
                $(data).parent().parent().removeClass("highlight-red");
            }
            if(data.checked && color == 'green'){
                $(data).parent().parent().addClass("highlight-green");
            }
            else{
                $(data).parent().parent().removeClass("highlight-green");
            }
            if(data.checked && color == 'yellow'){
                $(data).parent().parent().addClass("highlight-yellow");
            }
            else{
                $(data).parent().parent().removeClass("highlight-yellow");
            }
    }
</script>
</body>
</html>

Upvotes: 1

Views: 297

Answers (3)

Bobby Hudgins
Bobby Hudgins

Reputation: 111

I'm assuming you want the values to be selected still even when the user goes to a different page on your site and then select them again once back in that page.

As stated here, you set the cookies using the document.cookie javascript property.

The property mentioned above, however, is a semicolon separated key-value pair. you'll have to manipulate the string in order to add/edit a value.

Once you've added the value that you want, you can once again read it and then set the rows you want to be selected.

To get the selected value, you could use $(data).val() and put it inside changeSoma(). From there, you could check if it's checked $(data).is(':checked'). If it's checked, add it to document.cookie like document.cookie = "key=value; key2=value2;"

Upvotes: 0

ewwink
ewwink

Reputation: 19184

it easier using localStorage but since you're using jQuery then use jQuery cookie plugin

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Untitled Document</title>
</head>

<body>
  <style>
    .highlight-red {
      background-color: red;
    }

    .highlight-green {
      background-color: green;
    }

    .highlight-yellow {
      background-color: yellow;
    }

  </style>
  <div class="col-lg-10">
    <table id="Table" border="1">
      <tr class="highlight">
        <td><input type="checkbox" name="cb1" id="cb1" value="y" onChange="changeSoma(this, 'red')" /></td>
        <td>Click me</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="cb2" id="cb2" value="y" onChange="changeSoma(this, 'green')" /></td>
        <td>Click me</td>
      </tr>
      <tr>
        <td><input type="checkbox" name="cb3" id="cb3" value="y" onChange="changeSoma(this, 'yellow')" /></td>
        <td>Click me</td>
      </tr>
    </table>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/jquery.cookie/1.4.1/jquery.cookie.min.js"></script>
  <script>
    $(document).ready(function() {
      var checkedBox = $.cookie('checkedBox');
      console.log(checkedBox);
      if(checkedBox !== undefined) {
        // to check only
        //$(checkedBox).attr('checked', true);
        // emulate click to check and change the class
        $(checkedBox).each(function() {
          this.click();
        })
      }

    })

    function changeSoma(data, color) {
      if(data.checked && color == 'red') {
        $(data).parent().parent().addClass("highlight-red");
      }
      else {
        $(data).parent().parent().removeClass("highlight-red");
      }
      if(data.checked && color == 'green') {
        $(data).parent().parent().addClass("highlight-green");
      }
      else {
        $(data).parent().parent().removeClass("highlight-green");
      }
      if(data.checked && color == 'yellow') {
        $(data).parent().parent().addClass("highlight-yellow");
      }
      else {
        $(data).parent().parent().removeClass("highlight-yellow");
      }
      // set cookie
      var checked = "";
      $('input[type="checkbox"]').each(function() {
        if($(this).prop('checked')) {
          checked += "#" + this.id + ","; // #cb, jQuery id selector
        }
      })

      checked = checked.replace(/,$/, '')
      console.log(checked);
      $.cookie('checkedBox', checked);
    }

  </script>
</body>

</html>

Upvotes: 0

Jack jdeoel
Jack jdeoel

Reputation: 4584

localStorage is easier than cookie I thought . You can set and get by localStorage.setItem or localStorage.getItem and it will remain until you remove them !!!

<script>

    var cond = JSON.parse(localStorage.getItem("check"));
    for(var i in cond) {
        if(cond[i]) {
         $("#"+i).attr("checked",true);
         $("#"+i).parent().parent().addClass("highlight-"+cond[i]);
        }
    }
    function changeSoma(data, color){
            var state;
            if(localStorage.getItem("check") == null) {
                state = {cb1:0,cb2:0,cb3:0};
            } else{
                state = JSON.parse(localStorage.getItem("check"));
            }

            if(data.checked) {
                $(data).parent().parent().addClass("highlight-"+color);
                state[data.id]= color;
            } else {
                $(data).parent().parent().removeClass("highlight-"+color);
                state[data.id]= 0;
            }
            localStorage.setItem("check",JSON.stringify(state));
    }
</script>

Upvotes: 2

Related Questions