Ellen Schlechter
Posts: 0
Joined: Sun Aug 31, 2014 3:28 am

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.

prevar 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));/pre

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. Image

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Save checkbox values to local storage

Hello Ellen,

What values do these checkboxes have? It seems you didn't set properties "value" to them

Ellen Schlechter
Posts: 0
Joined: Sun Aug 31, 2014 3:28 am

Save checkbox values to local storage

Thank you. I only mapped the values to "text" vs "value".

Ellen Schlechter
Posts: 0
Joined: Sun Aug 31, 2014 3:28 am

Save checkbox values to local storage

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.
Image
Image

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.

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Save checkbox values to local storage

  1. You can read a text value instead of the value by changing pre$(el).val()/pre to pre$(el).text()/pre in your code
    1. 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?
Ellen Schlechter
Posts: 0
Joined: Sun Aug 31, 2014 3:28 am

Save checkbox values to local storage

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. Image

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Save checkbox values to local storage

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:
    prevar 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});
    });/pre

Ellen Schlechter
Posts: 0
Joined: Sun Aug 31, 2014 3:28 am

Save checkbox values to local storage

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.

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

Code: Select all

checkboxValues.push({C:C, B:B}); 

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

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?? Image

Serhii Kulibaba
Posts: 150
Joined: Tue Aug 27, 2013 1:47 pm

Save checkbox values to local storage

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
Ellen Schlechter
Posts: 0
Joined: Sun Aug 31, 2014 3:28 am

Save checkbox values to local storage

Maybe my code is completely wrong then...I'm not really sure. I just need something that will loop through a grid and read a label and an input so I can save them to local storage.

Return to “Issues”