Page 1 of 2 12 LastLast
Results 1 to 10 of 14

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

  1. #1
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

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

    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/


    Code:
        //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.
    Last edited by qwikad.com; 09-10-2015 at 05:49 PM.

  2. #2
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    Anyone?

  3. #3
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

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

  4. #4
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by molendijk View Post
    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:

    Code:
    //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?

  5. #5
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    Quote Originally Posted by molendijk View Post
    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.

  6. #6
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

    I don't understand why you would need the localStorage keys. Doesn't this do it?
    Code:
    <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>

  7. #7
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

    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.
    Last edited by qwikad.com; 09-10-2015 at 08:56 PM.

  8. #8
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

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

  9. #9
    Join Date
    Oct 2012
    Posts
    180
    Thanks
    22
    Thanked 1 Time in 1 Post

    Default

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

  10. #10
    Join Date
    Sep 2007
    Location
    The Netherlands
    Posts
    1,881
    Thanks
    49
    Thanked 266 Times in 258 Posts
    Blog Entries
    56

    Default

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

Similar Threads

  1. Replies: 2
    Last Post: 07-18-2012, 02:48 PM
  2. Replies: 0
    Last Post: 08-25-2011, 03:08 AM
  3. Handling Multiple Checkbox Values
    By mtippery1 in forum PHP
    Replies: 1
    Last Post: 04-10-2010, 05:45 AM
  4. Replies: 3
    Last Post: 10-27-2007, 08:04 PM
  5. Replies: 0
    Last Post: 04-27-2006, 07:09 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •