Local storage not working with checkboxes

HTML & CSS
1

I am implementing saving data entered into fields into localstorage. (I am using PhoneGap, HTML, and Javascript for this native app project.) If the user enters data into a text field like the following, then the data is saved and retrieved, even when powering the iPhone off and on again:

<li><input placeholder="note:" maxlength="30" type="text" name="s1frontSuspensionnotes" id="s1frontSuspensionnotes" /></li>

But if I use a series of checkboxes, then the checkbox data is not saved (note in the following that the “name” for all check boxes is the same to keep them in the group, while the “id” distinguishes each option selected):

<span class="topcheckbox"><input type="checkbox" name="s1frontTowerMtgShock" id="s1frontTowerMtgShock3" value="3-outer" /></span>
<br><span class="nextcheckboxes"><input type="checkbox" name="s1frontTowerMtgShock" id="s1frontTowerMtgShock2" value="2-middle" /></span>
<br><span class="nextcheckboxes"><input type="checkbox" name="s1frontTowerMtgShock" id="s1frontTowerMtgShock1" value="1-inner" /></span>

Can anyone tell me why text fields save in the localstorage, but the checkboxes don’t? I’ve also tried making the name= group name the same as the checkbox id, line for line, and updated the localstorage code to reflect the change, but it did not work. The text fields do save, so I know the local storage stuff works.

I put this in the HTML section because localstorage is part of HTML5, and checkboxes and text fields are part of HTML.

Thanks!
Steve

2

Is my question hard to understand? How can I make it clearer?

Thanks!

3

Sorry, but I don’t know what you mean by ‘localstorage’ :confused:

You do need to give checkboxes unique names, so that each input name gets one answer (in this case, on/off).

The only time you can use one name for multiple inputs is when you’re giving options with radio buttons, where only one of the options can be selected at a time so there is only one answer to the input.

4

I think you hit on the answer! I was treating them as <option>s or radio buttons! I’ll try this out and get back to you.

5

Here is an article on html5 and local storage:
HTML5 localStorage

My checkbox problem is still not solved, even with after changing to unique names.

6

why did you assign values to your checkboxes?

and wouldnt it be easier to use a select menu with options? then you can assign values.

7

It included values in case later I wanted to output the information as key/value pairs.

8

Can you post the full code or link to where we can see it? All you’ve provided is the bit of HTML that renders the checkbox elements. There is probably some logic error in the Javascript code that is writing to or reading from localstorage.

BTW, using checkboxes in a group (all with the same name attribute) is completely valid. When selecting multiple checkboxes in the same group only those that are checked will send their values to the server (assuming a normal form submit). When dealing with many options, a checkbox group is way easier to deal with (usability wise at least) than a multiple-select box.

9

My guess is that you are not storing the data in localStorage correctly. The easiest way to do this (without seeing your code) is to convert it to and from a string when saving and retrieving.

For example (haven’t tried running it… make sure punctuation is correct):

function saveForm(data){
localStorage.save(‘formValues’, JSON.stringify(data));
}

function loadForm(){
return JSON.parse(localStorage.get(‘formValues’));
}