Help get this topic noticed by sharing it on Twitter, Facebook, or email.

Save checkbox values to local storage

Hi there,

I am trying to get the text values of all of the checked-checkboxes and after researching the Appery.io forum, I found that this is what gets me closest to achieving that goal.

var checkboxValues = [];
$("input[type='checkbox']:checked", $.mobile.activePage).each(
function(i, el) {
console.log($(el).val());
checkboxValues.push($(el).val());
});
localStorage.setItem("arr", JSON.stringify(checkboxValues));


This solution seems to almost work for me. It doesn't record the value of the items that are checked but it gets the correct number of items. See the attached screen shot. It says ["Item 1","Item 1","Item 1"] instead of ["S17","165","567"]. I have mapped the text directly to the checkbox item but for some reason, it doesn't save it.
1 person has
this question
+1
Reply
  • Hello Ellen,

    What values do these checkboxes have? It seems you didn't set properties "value" to them
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • After moving forward, I found that I need to have to use both models and storage because I need more than one value per item. However, I have run into a few different issues now. I have formatted my LSV as you can see in the screenshot below.



    Issue #1: Since I need to save a value for both the id and the cow (as you can see in the screenshot), I need to use labels since I can't have two different things to the checkbox itself. How can I accomplish the same goal as before but using a label instead of the checkbox value?

    Issue 2#: Anytime I have saved something to storage using a model in the past, I have been able to map it. In this case, I don't think I can since I only want to save the values associated with the checked boxes. So I think I have two options, but I am not sure how to execute either. Is there a way that I can save to storage with mappings and only do it for the boxes that are checked? Or my other option is to not use mappings and somehow detect what is checked, then save the values of two different labels to "cow" and "id".

    Any help would be greatly appreciated.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • 1. You can read a text value instead of the value by changing
    $(el).val()
    to
    $(el).text()
    in your code

    2. Sorry, but I can't get the idea, what you are trying to do here. Do you need to check checkboxes according to values in the localStorage?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Let me try explaining another way!

    If you look at the screenshot, I have label A (cow/calf) and label B (ID). If the box is checked, I would like to take the value of label A and label B and save it to a local storage object that is formatted in the same way as how it appears in the screenshot (where the arrows are pointing). To see the set up of it, take a look at my last reply. It shows the screenshots of the model and storage I am using. (Yes my two examples have different names and variables but they are set up the same so I thought it would work for the explanation purposes.)

    Essentially, if the box is checked, both values need to be saved in storage. If the box isn't checked, it doesn't need to be saved.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated

  • What components do you use to display these A and B labels? Is it the only label or two labels? How are they located in your page layout?

    E.g.
    * You have a grid with 3 components: label1, label2 and the checkbox.
    * The service mapping generates multiple grids, based on this template
    * You need to read these labels, if the checkbox in their grid is selected
    * You have to read all selected checkboxes, read their parent grids (use a method "closest" for that https://api.jquery.com/closest/)
    * After that, you can read labels from this grid with a method "find" https://api.jquery.com/find/

    So your code should be like:
    var checkboxValues = [];
    $("input[type='checkbox']:checked").each(function(){
    var A = $(this).closest("[name=myGrid]").find("[name=label_A]").text();
    var B = $(this).closest("[name=myGrid]").find("[name=label_B]").text();
    checkboxValues.push({A:A, B:B});
    });
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • My next challenge involves a similar scenario except my grid isn't in a checkbox...it is on its own. I have tried using this code but it doesn't loop through all of the grid items.

    var checkboxValues = [];
    $(document).each(function(){
    var C = Apperyio("mobiletextinput_896").val();
    console.log("c" +C)
    var B = Apperyio("mobilelabel_895").text();
    console.log("b" +B)

    checkboxValues.push({C:C, B:B});
    });
    localStorage.setItem("arr", JSON.stringify(checkboxValues));


    The screenshot below show what it returns. It saves it in the right format but in this case, there should be 3 items instead of just one. Any ideas on how to make it look through each row of the grid??
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • Sorry, but I don't understand your code.

    1. You don't have to make a loop by the document, you have to run it by the grid.
    2. You read the same labels/inputs here, because of your code, which uses Apperyio("mobilelabel_895"), instead of $(this).find("[name=mobilelabel_895]") which reads the label exactly inside the grid
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Thank you for the advice. In doing that with the code below, I don't get each individual value.

    var checkboxValues = [];
    $("[name=mobilegrid_889 ]").each(function(){

    var C = Apperyio("mobiletextinput_896").val();
    var B = Apperyio("mobilelabel_895").text();
    checkboxValues.push({C:C, B:B});
    });

    localStorage.setItem("arr", JSON.stringify(checkboxValues));


    It just returns 3 instead of two and each of them should be different instead of how they are all the same in this screenshot..
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Thank you! Do you know why it has an empty object last? It shouldn't be there at all...
    • Yes, this is a template object which is used in the mapping process.

      Please ignore the last item here or check it before reading the values.

      var checkboxValues = [];
      
      $("[name=mobilegrid_889 ]").each(function(){
      if (!$(this).parent().attr("data-appery-tpl")){
      var C = Apperyio("mobiletextinput_896").val();
      var B = Apperyio("mobilelabel_895").text();
      checkboxValues.push({C:C, B:B});
      }
      });
      localStorage.setItem("arr", JSON.stringify(checkboxValues));
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • So if I have it saved in local storage in the way you have outlined above, how do I get just the "B" values back through mapping? Right now, whatever I do only gives me the first value rather than all of the values stored.

    This is how I have it mapped:


    And this is the code I am using with the mapping:
    var arrayJS = value.C;
    console.log("arrayJS = ", arrayJS);
    var arrayJSON = JSON.stringify(arrayJS);
    console.log("arrayJSON = ", arrayJSON);

    return arrayJSON;


    The console shows my result. It only gets the first item rather than an "a, b, and c".

    Any ideas on how to get everything??
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. indifferent, undecided, unconcerned kidding, amused, unsure, silly happy, confident, thankful, excited sad, anxious, confused, frustrated

  • Please don't use multiple input mapping arrows
    It might break all your custom code.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. happy, confident, thankful, excited kidding, amused, unsure, silly indifferent, undecided, unconcerned sad, anxious, confused, frustrated

  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

    e.g. kidding, amused, unsure, silly indifferent, undecided, unconcerned happy, confident, thankful, excited sad, anxious, confused, frustrated