Is it possible to get the values of checked checkboxes from anywhere on a site?

[qwikad.com]

This code works fine using values / loclaStorage to keep checkboxes checked. However, the values are only displayed when the checkboxes are on the page. I understand it's possible to sorta by-pass this and get the values even when the checked checkboxes are not on the page, since those values are already in localStorage, but I have no idea how to make it work.


Working demo: http://jsfiddle.net/T5Pm7/292/

    //Adds to LocalStorage

    (function() {
      var boxes = document.querySelectorAll("input[type='checkbox']");
      for (var i = 0; i < boxes.length; i++) {
        var box = boxes[i];
        if (box.hasAttribute("value")) {
          setupBox(box);
        }
      }

      function setupBox(box) {
        var storageId = box.getAttribute("value");
        var oldVal = localStorage.getItem(storageId);
        console.log(oldVal);
        box.checked = oldVal === "true" ? true : false;

        box.addEventListener("change", function() {
          localStorage.setItem(storageId, this.checked);
        });
      }
    })();

    //Checkbox selections

    (function(d) {

      function nodeFlush(e) {
        while (e.firstChild) e.removeChild(e.firstChild);
      }

      function nodeAdd(e, node) {
        e.appendChild(typeof node == 'object' ? node : d.createTextNode(node));
      }

      function nodeReplace(e, node) {
        nodeFlush(e);
        nodeAdd(e, node);
      }

      function eventAdd(e, eventName, handler) {
        if (e.addEventListener) e.addEventListener(eventName, handler, false);
        else e.attachEvent('on' + eventName, handler);
      }

      var
        target = d.getElementById('selections'),
        output = d.getElementById('selectionsResults'),
        inputs = target.getElementsByTagName('input');

      function checkInputs() {
        var result = [];
        for (var i = 0; i < inputs.length; i++) {
          if (inputs[i].checked) result.push(inputs[i].value);
        }
        nodeReplace(output, result.length ? result.join(', ') : '0 items selected...');
        document.getElementById('selectionsResults').innerHTML = document.getElementById('selectionsResults').textContent;

      }

      for (var i = 0; i < inputs.length; i++) {
        eventAdd(inputs[i], 'change', checkInputs);
        eventAdd(inputs[i], 'click', checkInputs);

      }

      checkInputs();

    })(document);

PS I'd prefer not to use ajax / php for this to work.

[qwikad.com]

Anyone?

[molendijk]

What do you mean exactly? How is it possible to check checkboxes when they are not visible?

[qwikad.com]

What do you mean exactly? How is it possible to check checkboxes when they are not visible?

I understand it's possible by reading the keys for those values in localStorage. With something like this:

//Get them with this

for (var key in localStorage) { console.log(key + ':' + localStorage[key]); } 


//Then output them

var output = ''; for (var key in localStorage) { output = output+(key + ':' +localStorage[key])+'\n'; }

But I have NO idea how to make it work with my code. Will you give it a try?

[qwikad.com]

What do you mean exactly? How is it possible to check checkboxes when they are not visible?

By the way, I am not talking about how to check checkboxes if they are not visible. I am talking about getting values for the checked checkboxes via the keys in localStorage from anywhere on the site whether the checkboxes are on the page or not. As long as they have already been checked.

[molendijk]

I don't understand why you would need the localStorage keys. Doesn't this do it?

<a href="javascript: void(0)" onclick="document.getElementById('form').style.display='block'; return false">show checked values</a>&nbsp;&nbsp; 
<a href="javascript: void(0)" onclick="document.getElementById('form').style.display='none'; return false">hide checked values</a><br><br>

<form id="form" style="display: none">
    <div id="selections">
        <input type="checkbox" value="1">
        <label>First</label>
        <br>
        <input type="checkbox" value="2">
        <label>Second</label>
        <br>
        <input type="checkbox" value="3">
        <label>Third</label>
        <br>
        <input type="checkbox" value="4">
        <label>Forth</label>
        <br>
        <br>
        <div>You Selected: <span id="selectionsResults"></span>
        </div>
    </div>
</form>

<script>
  //Adds to LocalStorage

    (function() {
      var boxes = document.querySelectorAll("input[type='checkbox']");
      for (var i = 0; i < boxes.length; i++) {
        var box = boxes[i];
        if (box.hasAttribute("value")) {
          setupBox(box);
        }
      }

      function setupBox(box) {
        var storageId = box.getAttribute("value");
        var oldVal = localStorage.getItem(storageId);
        console.log(oldVal);
        box.checked = oldVal === "true" ? true : false;

        box.addEventListener("change", function() {
          localStorage.setItem(storageId, this.checked);
        });
      }
    })();

    //Checkbox selections

    (function(d) {

      function nodeFlush(e) {
        while (e.firstChild) e.removeChild(e.firstChild);
      }

      function nodeAdd(e, node) {
        e.appendChild(typeof node == 'object' ? node : d.createTextNode(node));
      }

      function nodeReplace(e, node) {
        nodeFlush(e);
        nodeAdd(e, node);
      }

      function eventAdd(e, eventName, handler) {
        if (e.addEventListener) e.addEventListener(eventName, handler, false);
        else e.attachEvent('on' + eventName, handler);
      }

      var
        target = d.getElementById('selections'),
        output = d.getElementById('selectionsResults'),
        inputs = target.getElementsByTagName('input');

      function checkInputs() {
        var result = [];
        for (var i = 0; i < inputs.length; i++) {
          if (inputs[i].checked) result.push(inputs[i].value);
        }
        nodeReplace(output, result.length ? result.join(', ') : '0 items selected...');
        document.getElementById('selectionsResults').innerHTML = document.getElementById('selectionsResults').textContent;

      }

      for (var i = 0; i < inputs.length; i++) {
        eventAdd(inputs[i], 'change', checkInputs);
        eventAdd(inputs[i], 'click', checkInputs);

      }

      checkInputs();

    })(document);
</script>

[qwikad.com]

OK, I am going to demonstrate what I need it for. For instance go to:

http://qwikad.com/0/posts/6-Services...Relationships/

and scroll all the way to the bottom where you see the last ad and two tabs Recently Viewed and Favorites.

Now add the last ad to favorites (Click on the star. The stars are actually checkboxes.) then click on the Favorite tab. You will see that that ad is added to favorites.

Next click on the page 2 (where it shows << 1 2 >>) scroll all the way down again and click on the Favorites tab again. The ad you added to favorites is not there. If you go back to page 1 it's going to be there, of course.

I need to show that and all other ads added to favorites under the Favorites tab - doesn't matter which page a user is on. The only way I can do it is by getting their values from the localStorage keys.

I hope this clarifies what I am trying to accomplish.

[molendijk]

When I click on the star, all I get is You do not have any favorites and nothing is bookmarked.

[qwikad.com]

What browser are you using? Try Chrome, later FF, Opera or IE 11.

[molendijk]

The problem occurs with all modern browsers: ie, firefox, chrome, opera and safari (windows).