Saturday, June 1, 2024
 Popular · Latest · Hot · Upcoming
119
rated 0 times [  121] [ 2]  / answers: 1 / hits: 20894  / 11 Years ago, wed, july 17, 2013, 12:00:00

I'm trying to store the result of checked checkboxes in local storage but when I try to save I get the error mentioned above.



Not quite sure what is undefined since I see the property in my code.
Here's the code:



var getCheckboxValue = function (){
var checkboxes = document.forms[0].features;
for(var i=0, j=checkboxes.length; i<j; i++){
if(checkboxes[i].checked){
console.log(checkboxes[i].value);
//featuresValue = $(features).value();
}else{
checkboxes = No
}
}
}

var storeData = function (){
var id = Math.floor(Math.random()*10000001);
//getSelectedRadio();
getCheckboxValue();
var item = {};
item.brand = [Brand,$(brand).value];
item.model = [Model,$(model).value];
item.comments = [comments,$(comments).value];
//item.acoustic = [acoustic, acousticValue];
item.features = [features,checkboxes];

//Save data into local storage: Use Stringify to convert our object to a string
localStorage.setItem(id,JSON.stringify(item));
alert(Contact Saved!);
}


//set link & submit click events
var save = $(button);
save.addEventListener(click, storeData);


and here's the relevant html:



<li>Features:
<ul>
<li><input type=checkbox name=features value = Cutaway id=cutaway /><label for=cutaway>Cutaway</label></li>
<li><input type=checkbox name=features value = Finished id=finished /><label for=finished>Finished</label></li>
<li><input type=checkbox name=features value = Inlay id=inlay /><label for=inlay>Inlay</label></li>
<li><input type=checkbox name=features value = Wide Neck id=wneck /><label for=wneck>Wide Neck</label></li>
<li><input type=checkbox name=features value = Left-handed id=lhanded /><label for=lhanded>Left-handed</label></li>
</ul>
</li>


Alternatively, here's a link to the full code on github:



https://github.com/b80266/VFW-Project-2/blob/master/additem.html



https://github.com/b80266/VFW-Project-2/blob/master/main.js


More From » html

 Answers
29

The problem is that you're overwriting the value of checkboxes (the original collection of checkboxes in the form) here:



}else{
checkboxes = No
}


This is inside of the loop...the loop that is iterating through checkboxes. It is now iterating over the characters in the string No, not the collection of elements you originally retrieved. This string is only 2 characters long, while your original loop has a cached value of checkboxes.length (5 elements) stored in j which is not updated each iteration, meaning it will loop past i = 1, accessing the third, fourth and fifth indexes, which are now undefined.



Another problem, is that in your storeData function, you're calling getCheckboxValue but not storing it anywhere...then later you're referencing some checkboxes variable later - item.features = [features,checkboxes];. You need to store the result, then use that variable. Here's a demo that seems to work with some assuming HTML:



var $ = function (id) {
return document.getElementById(id);
};

var getCheckboxValue = function () {
var checkboxes = document.forms[0].features;
for (var i = 0, j = checkboxes.length; i < j; i++) {
if (checkboxes[i].checked) {
console.log(checkboxes[i].value + is checked);
} else {
//checkboxes = No;
console.log(checkboxes[i].value + is not checked);
}
}
};

var storeData = function () {
var id = Math.floor(Math.random()*10000001);
var checkedBoxes = getCheckboxValue();
var item = {};
item.brand = [Brand,$(brand).value];
item.model = [Model,$(model).value];
item.comments = [comments,$(comments).value];
item.features = [features,checkedBoxes];

//Save data into local storage: Use Stringify to convert our object to a string
localStorage.setItem(id,JSON.stringify(item));
alert(Contact Saved!);
};


//set link & submit click events
var save = $(button);
save.addEventListener(click, storeData, false);


DEMO: http://jsfiddle.net/jmUXY/1/


[#76928] Tuesday, July 16, 2013, 11 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
braidenv

Total Points: 80
Total Questions: 104
Total Answers: 91

Location: Peru
Member since Fri, Oct 14, 2022
2 Years ago
braidenv questions
;