SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Hybrid View

  1. #1
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    local storage not working with checkboxes

    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:
    HTML Code:
    <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):
    HTML Code:
    <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. #2
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Is my question hard to understand? How can I make it clearer?

    Thanks!

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Sorry, but I don't know what you mean by 'localstorage'

    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. #4
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post

    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.
    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. #5
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    SitePoint Enthusiast
    Join Date
    Aug 2011
    Posts
    67
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Wizard
    Join Date
    Feb 2007
    Location
    Southern California
    Posts
    1,388
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    It included values in case later I wanted to output the information as key/value pairs.

  8. #8
    SitePoint Member
    Join Date
    Mar 2008
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    SitePoint Member
    Join Date
    Oct 2011
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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'));
    }


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
  •