2

I already looked at the other threads but couldn't find anything. I have one checkbox which hides some table columns by changing it's status but after every refresh it changes to the initial status (checked) and the columns aren't hidden anymore. Is there any way to keep the status after the refresh? Can I apply local storage in this case and is there a way to do it without jQuery? Below is some code:

EDIT: added the suggested function for localstorage

<script type="text/javascript">
function hide_show_table(col_name)
{
 var checkbox_val=document.getElementById(col_name).value;
 if(checkbox_val=="hide")
 {
  var all_col=document.getElementsByClassName(col_name);
  for(var i=0;i<all_col.length;i++)
  {
   all_col[i].style.display="none";
  }
  document.getElementById(col_name+"_head").style.display="none";
  document.getElementById(col_name).value="show";
 }

 else
 {
  var all_col=document.getElementsByClassName(col_name);
  for(var i=0;i<all_col.length;i++)
  {
   all_col[i].style.display="table-cell";
  }
  document.getElementById(col_name+"_head").style.display="table-cell";
  document.getElementById(col_name).value="hide";
 }
}
</script>

<script>
window.onload = function() {
  const checkbox = document.getElementById('fdt_col');
  checkbox.checked = !!localStorage.getItem('checked');
  checkbox.addEventListener('change', function(){
localStorage.setItem('checked', this.checked);});
}
</script>


echo"<input type='checkbox' name='fdt_col' value='hide' id='fdt_col'
onchange='hide_show_table(this.id);' checked>some text</input><br/>";

Thank you

Okan
  • 21
  • 4

1 Answers1

3

I see you're using Vanilla javascript so you can use the localStorage like so:

window.onload = function() {
  const checkbox = document.getElementById('fdt_col');
  checkbox.checked = !!localStorage.getItem('checked');
  checkbox.addEventListener('change', function() {localStorage.setItem('checked', this.checked);});

}

Note about localStorage vs sessionStorage

localStorage will save your items on all tabs while sessionStorage is to be used if you need separation between tabs

ZimGil
  • 877
  • 4
  • 12
  • 1
    I just tried it. I wrote the id of my checkbox instead of bar and called my key 'checked' instead of 'foo'. And now the console says: SyntaxError: missing ) after argument list – Okan Feb 12 '20 at 10:26
  • The console now says: TypeError: checkbox is null. I now added if (typeof checked !== 'undefined')... The error disappeared but it I still get the initial status after the refresh – Okan Feb 12 '20 at 11:07
  • `document.getElementById` must be passed a string as a parameter so you want to: `document.getElementById('fdt_col')` – ZimGil Feb 12 '20 at 14:44
  • `typeof checked !== 'undefined'` will always return `false` in this case. you can make this `if` after you've defined `checkbox` but only after you define it – ZimGil Feb 12 '20 at 14:48
  • I've updated my answer again to contain your class name – ZimGil Feb 12 '20 at 14:49
  • Can you please provide a working example? jsfiddle? – ZimGil Feb 13 '20 at 14:02