PDA

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



qwikad.com
09-09-2015, 08:31 PM
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
09-10-2015, 02:22 PM
Anyone?

molendijk
09-10-2015, 04:59 PM
What do you mean exactly? How is it possible to check checkboxes when they are not visible?

qwikad.com
09-10-2015, 05:10 PM
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
09-10-2015, 05:33 PM
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
09-10-2015, 07:22 PM
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
09-10-2015, 08:05 PM
OK, I am going to demonstrate what I need it for. For instance go to:

http://qwikad.com/0/posts/6-Services/203-Dating-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
09-10-2015, 11:14 PM
When I click on the star, all I get is You do not have any favorites and nothing is bookmarked.

qwikad.com
09-10-2015, 11:41 PM
What browser are you using? Try Chrome, later FF, Opera or IE 11.

molendijk
09-10-2015, 11:52 PM
The problem occurs with all modern browsers: ie, firefox, chrome, opera and safari (windows).

qwikad.com
09-11-2015, 12:00 AM
No sure why... my wife's laptop and my laptop all add to favorites on all 3 different browsers we have. OK... I think I am going to redo this whole thing using ajax / php / mysql. It's concerning to me that it's not working in your browsers. Thanks for your help nonetheless!

molendijk
09-11-2015, 12:09 AM
Using php or another server side language is better anyway, as localstorage loses all data after clearing the browser's history (1) and only stores data on the browser you'r actually using (2).

molendijk
09-11-2015, 12:22 AM
I should add this:
local means what it says: on your computer and in the browser you're using only. That's why I never use it for Internet-purposes.

jscheuer1
11-17-2015, 01:09 AM
MMMMmmm. Just got your PM about this. I think it's possible. Certainly using a site wide cookie/local storage data pin, in conjunction with either site wide PHP and/or javascript code. Up to you how you want to read it. Also, what Arie says is spot on! Unless you use a login and server side profile or similar, the persistence of the data could be fairly easily lost from use to use. If, however, your desire is only to preserve this information during the current browser session, that's pretty easy without any server side code, yet would be enhanced if server side code were available for it. Much depends upon how critical this is. If it's OK if someone decides to, in the middle of viewing the site, to delete cookies and/or local storage, resulting in a total loss of this data for them, then javascript alone can suffice. I can guarantee that won't happen very often, but it will happen sometimes. If even sometimes is unacceptable, you need an all server side solution.

Sorry to be so long getting back to you, been busy/distracted.