I’m confused.

Checking the values of Checkboxes made after a Database request returned a list, with the Checkboxes embedded in a drop-down

My page is querying the "Database for Life Science Standards" that relate to "Structure and Function". The request successfully brings the values back to a LABEL that is EMBEDDED in a CheckBoxGroup.

What happens... the user gets the list of possibilities. The user can check the little check boxes. However, I cannot find a way to read what the user has checked.

I have looked online and I found this code from
https://getsatisfaction.com/apperyio/...:

var arr = new Array();
arr = Appery("guardianCheckBox").find(":checked").map(function(el) {
return el.val();
});
if (arr.length == 0) {
alert("Please select a guardian!");
return;
}
if (arr.length > 2) {
alert("Please select only 2 guardians!");
} else {
var items = ['selectedGuardian', 'selectedGuardian2'];
$.each(arr, function(i, value){
localStorage.setItem(items[i], value);
});
addChild.execute();
}
// restore from localStorage
var items = ['selectedGuardian', 'selectedGuardian2'];
$.each(arr, function(i, key){
var value = localStorage.getItem(key);
Appery("guardianCheckBoxList")
.find("input[value='" + value + "']:first")
.prop('checked', 'checked')
.refresh();
});

var arr = new Array();
Appery("checkboxgroup").find(":checked").each(function(){
arr.push($(this).val());
});

=============================
I modified it for my purposes like this:
=============================

var arr = new Array([]);
arr = Appery("checkbox2_Standard").find(":checked").map(function(el) {
return el.val();
});
if (arr.length === 0) {
alert("Please select a standard!");
return;
}
if (arr.length > 2) {
alert("Please select only 2 standards maximum.");
} else {
var items = ['NGSS_standard1', 'NGSS_standard2'];
$.each(arr, function(i, value){
localStorage.setItem(items[i], value);
});
addChild.execute();
}
// restore from localStorage
var items = ['NGSS_standard1', 'NGSS_standard2'];
$.each(arr, function(i, key){
var value = localStorage.getItem(key);
Appery("checkbox2_StandardList")
.find("input[value='" + value + "']:first")
.prop('checked', 'checked')
.refresh();
});

Appery("checkboxgroup").find("input:checked").each(function(){
alert($(this).text());
});

I understand conceptually that an array would need to be created when more than one standard is checked. With each new "Check" , an item would be added to the array. This code limits the number of standards to 2, which is close to what I want to do. I want to take all the "checked" boxes and store the results in a growing database. This way, at the end of the app, the user can print these "Standards" later in a final document. I am using the check boxes so the user doesn't need to type all the text for each standard.

FIREFOX browser is giving me these errors:

Errors on login:
----------------------------------------
Use of Mutation Events is deprecated.
Use MutationObserver instead. target-script-min.js:1271
ReferenceError: jsPDF is not defined pdfJavafromWeb.js:2
ReferenceError: Downloadify is not defined download_java_scriptprint.js:3
ReferenceError: Downloadify is not defined showpdf.js:3

and after that...

Errors when trying to use the checkboxes and javascript I modified:
----------------------------------------
TypeError: doc.fromHTML is not a function JavaScript3.js:14
Empty string passed to getElementById(). jquery.mobile-1.4.0.js:14607
Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery-1.9.1.js:3346
Use of getAttributeNode() is deprecated. Use getAttribute() instead. jquery-1.9.1.js:2514
TypeError: el.val is not a function

Here are pictures of my database, the element names , and the GUI in use.







Thank you for showing such care and mercy. I am doing my best to read and understand the previous posts. I know this question was asked but I am missing some key concepts of how the check boxes should work. I remember BASIC from the 1980s and I am trying to apply this knowledge to javascript. not bad, but a different animal for programming.

Can I better organize my files in the database? should I?

I know everyone's app logic is different, but I am trying to make this easy for the user, and what is easy for the user, is more difficult for the programmer.

Thank you thank you 1000x!

Alex
1 person has
this question
+1
This topic is no longer open for comments or replies.
  • Hi Alex,

    I see you still have this problem,

    Don't worry, it's easy to implement what you want. We will help you with this issue at all.

    At first you need make correct mapping for your checkboxes list. You need fill "value" field for each checkbox item.

    See details on screen shot: http://prntscr.com/43sb95/direct

    Then you can use following code get checked items into JS variable:



    //Note you need replace "mobilecheckboxgroup_38" with your checkboxlist component name.
    var ckeckedItems = jQuery('[dsid="mobilecheckboxgroup_38"] input[type="checkbox"]:checked');

    console.log("Checked items count = " + ckeckedItems.length);

    //Iterate through checked items.
    for(var i = 0; i < ckeckedItems.length; i++){
    var checkedItem = jQuery(ckeckedItems[i]);

    var checkedValue = checkedItem.val();

    //Just out this value to browser console. Please check out it to see results.
    console.log("checkedItem[" + i + "] = " + checkedValue);

    //Here you can use "checkedValue" JS variable as you need.
    };



    Note: you need run this code after user set checkboxes state. For example on "submit/save/create" button click.

    Also - this code has some debug information for you. Please open your browser console and see this information.

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

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

  • //Note you need replace "checkbox2_Standard" with your checkboxlist component name.
    var checkedItems = jQuery('[dsid="checkbox2_Standard"] input[type="checkbox"]:checked');
    console.log("Checked items count = " + checkedItems.length);
    //Iterate through checked items.
    for(var i = 0; i < checkedItems.length; i++){
    var checkedItem = jQuery(checkedItems[i]);
    var checkedValue = checkedItem.val();
    //Just out this value to browser console. Please check out it to see results.
    console.log("checkedItem[" + i + "] = " + checkedValue);
    //Here you can use "checkedValue" JS variable as you need.
    }

    there were some spelling mistakes for "Checked" , but I fixed those words and pasted the final code here . You must have been up late ! Thanks for your help, this code returned the values in the browser, but I cannot get rid of the other errors.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

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

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

  • I don't understand why things like "downloadify" are not installed.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • I’m unsure
    SyntaxError: syntax error jspdf.js:6

    SyntaxError: syntax error downloadify.min.js:6

    Empty string passed to getElementById(). jquery.mobile-1.4.0.js:14607

    Use of getPreventDefault() is deprecated. Use defaultPrevented instead. jquery-1.9.1.js:3346
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • I’m unsure
    ok i found out why this happened, but now i have new errors , and i cannot log on like i used to...

    very sad, I want to show my friends my progress using the QR code and testing links.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • I’m unsure
    Empty string passed to getElementById(). jquery.mobile-1.4.0.js:14607

    $(document).off("click", '#loginScreen_mobilecontainer2 [name="loginButton"]').on({
    click: function() {
    if (!$(this).attr('disabled')) {
    try {
    loginService.execute({})
    } catch (ex) {
    console.log(ex.name + ' ' + ex.message);
    hideSpinner();
    };

    the login uses this command or code, and the browser doesn't like this part:

    console.log(ex.name + ' ' + ex.message);
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • I’m unsure
    ok, I found the bug.

    The way my app is set up, it is using an iPAD template.

    This divides the screen into 2 parts.

    When I

    So when I set an event, like PAGE SHOW and I ask the browser to SETCONTENT to a web page, the app doesn't login.

    How do I use the SETCONTENT so I don't mess up my app?
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • How to set property of a LABEL to a CHECKED ITEM or CHECKED ITEMS based on the code from before...I want to store all the checked items into something that i can return to the user.

    I want to tell the USER, hey, you checked these standards. Then I want to save these in a new database using the CREATE SERVICE.

    Can I save these values to local variables and show the user what they have chosen, so they can modify or update the standards they chose?

    Thanks for your help!

    //Note you need replace "checkbox2_Standard" with your checkboxlist component name.
    var checkedItems = jQuery('[dsid="checkbox2_Standard"] input[type="checkbox"]:checked');
    console.log("Checked items count = " + checkedItems.length);

    //Iterate through checked items.
    for(var i = 0; i < checkedItems.length; i++){
    var checkedItem = jQuery(checkedItems[i]);
    var checkedValue = checkedItem.val();

    //Just out this value to browser console. Please check out it to see results.
    console.log("checkedItem[" + i + "] = " + checkedValue);

    //Here you can use "checkedValue" JS variable as you need.
    }
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • How to set property of a LABEL to a CHECKED ITEM or CHECKED ITEMS based on the code from before...I want to store all the checked items into something that i can return to the user.

    I want to tell the USER, hey, you checked these standards. Then I want to save these in a new database using the CREATE SERVICE.

    Can I save these values to local variables and show the user what they have chosen, so they can modify or update the standards they chose?

    Thanks for your help!
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • Hi Alex,

    At first - it seem you are using "checkbox component" instead of "checkboxgroup component" please check it out.

    To store checked items into LSV you can use following code:



    var checkedItems = [];

    //Note you need replace "mobilecheckboxgroup_38" with your checkboxlist component name.
    var ckeckedItems = jQuery('[dsid="mobilecheckboxgroup_38"] input[type="checkbox"]:checked');
    console.log("Checked items count = " + ckeckedItems.length);
    //Iterate through checked items.
    for(var i = 0; i < ckeckedItems.length; i++){
    var checkedItem = jQuery(ckeckedItems[i]);

    var checkedText = checkedItem.closest("span").find("label").text();

    var checkedValue = checkedItem.val();
    //Just out this value to browser console. Please check out it to see results.
    console.log("checkedItem[" + i + "] = " + checkedValue);
    //Here you can use "checkedValue" JS variable as you need.

    checkedItems.push({text: checkedText, value: checkedValue});
    };

    localStorage.setItem("checkedItemsLSV", JSON.stringify(checkedItems));



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

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

  • Thanks Yurii,

    I was working on printing code, but I will work on this again tomorrow.

    I want to organize all the data and then store the data in a database and then call it back ... and print the data in a standardized template.

    I was reading about pdfs, but I find it very confusing to use the java script.

    I downloaded jsPDF and pdfmake but I am getting errors in places I don't understand. :-(

    I will try more tomorrow.

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

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

  • ok, so I can't seem to get this code to work

    I see what you mean about the "checkbox component" vs the "CheckboxGroup component", but there doesn't seem to be a difference for my purposes. Or is there?

    I am having trouble implementing the code to show the user what they have chosen.

    I used...
    ----------------------------------------------------------------------------------------------------------
    var checkedItems = [];
    //Note you need replace "mobilecheckboxgroup_38" "checkbox2_Standard" with your checkboxlist component name.
    var ckeckedItems = jQuery('[dsid="checkbox2_Standard"] input[type="checkbox"]:checked');
    console.log("Checked items count = " + checkedItems.length);

    //Iterate through checked items.
    for(var i = 0; i < checkedItems.length; i++){
    var checkedItem = jQuery(checkedItems[i]);
    var checkedText = checkedItem.closest("span").find("label").text();
    var checkedValue = checkedItem.val();
    //Just out this value to browser console. Please check out it to see results.
    console.log("checkedItem[" + i + "] = " + checkedValue);
    //Here you can use "checkedValue" JS variable as you need.
    checkedItems.push({text: checkedText, value: checkedValue});
    }
    localStorage.setItem("checkedItemsLSV", JSON.stringify(checkedItems));


    -----------------------------------------------------------------------------------------------------------
    the "add JS" is this return'{"TopicChosen":"'+value+'"}';
    -----------------------------------------------------------------------------------------------------------

    I appreciate your gift, the javascript above stores the data into "checkedItemsLSV", a local variable which I have created.

    so I attempted to set the properties of a LABEL to the localvariable checkedItemsLSV, but the computer makes the label as ...

    []

    so I don't understand where my problem or problems are happening.

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

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

  • I’m unsure


    I changed the code a little from PLURAL "items" to SINGULAR "item", like this:

    //Here you can use "checkedValue" JS variable as you need.
    checkedItems.push({text: checkedText, value: checkedValue});
    }
    localStorage.setItem("checkedItemsLSV", JSON.stringify(checkedItems));

    -- to --

    //Here you can use "checkedValue" JS variable as you need.
    checkedItem.push({text: checkedText, value: checkedValue});
    }
    localStorage.setItem("checkedItemsLSV", JSON.stringify(checkedItem));

    and above is the screen. Can you help me? Why don't I see the checked standards for both? Only the second one is visible, but buried in an array or something.

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

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

  • Hi Alex,

    Nope, there is big diffrence between checkboxGroup component and checkbox component.

    CheckBoxes - are inside the checkboxGroup component.

    Please take a look on scren shot to understand this difference:

    http://prntscr.com/461znj/direct

    So you need back to your code and replace your "checkbox2_Standard" with checkboxGroup component(exactly the same as it mentioned in comment for the code).

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

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

  • ok I have been reading about JSON and it seems like to make a JSON you are using STRINGIFY to build the object with each new "click".

    I have also read that PARSE is used to break down the object that was created using stringify.

    I guess now that this local storage variable is created, and it has this data packed, when I set a LABEL to this local storage variable no information is put into the LABEL.

    var checkedItems = [];
    //Note you need replace "mobilecheckboxgroup_38" with your checkboxlist component name.

    var checkedItems = jQuery('[dsid="checkboxgroup"] input[type="checkbox"]:checked');
    console.log("Checked items count = " + checkedItems.length);

    //Iterate through checked items.
    for(var i = 0; i < checkedItems.length; i++){
    var checkedItem = jQuery(checkedItems[i]);
    var checkedText = checkedItem.closest("span").find("label").text();
    var checkedValue = checkedItem.val();

    //Just out this value to browser console. Please check out it to see results.
    console.log("checkedItem[" + i + "] = " + checkedValue);

    //Here you can use "checkedValue" JS variable as you need.
    checkedItem.push({text: checkedText, value: checkedValue});
    localStorage.setItem("checkedItemsLSV", JSON.stringify(checkedItem));
    }
    =======================================================
    now I would like to see the data, so I should parse the data? Is that correct?

    localStorage.setItem("checkedItemsLSV", JSON.stringify(checkedItem));
    JSON.parse(checkedItem);
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • Alex,

    Nope, to see data in LSV you can do following:

    1 Open chrome browser.

    2 Run your app in this browser without frame.

    3 Open internal browser debugger(F12).

    4 Navigate to console tab.

    5 Put in this console following code:



    console.log(localStorage.getItem("checkedItemsLSV"));



    6 Press "Enter" to run this code in console.

    7 You will get result.

    See details: http://prntscr.com/46384m/direct

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

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

  • Thanks Yurii, I do see this, that is ok, but my goal is to store the data in a local storage variable, which is in the checkedItemsLSV, but how can I repost it on the screen so the user can see?

    I want to make the user aware of what they have checked.

    so that the button reads the data, saves it locally, and then I can re-display this to the user (not just to me privately in the console).

    I want to have the results appear in a box below the drop down checkboxgroup.
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • Alex,

    Currently it's hard to help you at all, cause of we don't know how you would like to display this information to user.

    But here is simple way do it:

    1. Add to your page(where you need) label component.

    2. Use following code to fill the label with information stored in "checkedItemsLSV" lsv:



    var checkedItemsLSVValue = localStorage.getItem("checkedItemsLSV");

    var stringToUser = checkedItemsLSVValue;

    //Here you can change "stringToUser" in accordance with you needs.

    //Note you need replace "labelName" with your label component(from 1st step) name.
    Appery("labelName").text(stringToUser);



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

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

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

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

  • ok i tried the code, and now my program is stuck in a loop, the browser is crashing when i click the SAVE NGSS button.

    this is the code...
    -----------------------------------------------------
    var checkedItems = [];

    //Note you need replace "mobilecheckboxgroup_38" "checkbox2_Standard" with your checkboxlist component name.
    var checkedItems = jQuery('[dsid="checkboxgroup"] input[type="checkbox"]:checked');
    console.log("Checked items count = " + checkedItems.length);

    //Iterate through checked items.
    for(var i = 0; i < checkedItems.length; i++){
    var checkedItem = jQuery(checkedItems[i]);
    var checkedText = checkedItem.closest("span").find("label").text();
    var checkedValue = checkedItems.val();

    //Just out this value to browser console. Please check out it to see results.
    console.log("checkedItem[" + i + "] = " + checkedValue);

    //Here you can use "checkedValue" JS variable as you need.
    checkedItems.push(
    {
    text: checkedText,
    value: checkedValue
    });
    }

    localStorage.setItem("checkedItemsLSV", JSON.stringify(checkedItems));
    var checkedItemsLSVValue = localStorage.getItem("checkedItemsLSV");

    //Here you can change "stringToUser" in accordance with you needs.

    //Note you need replace "labelName" with your label component(from 1st step) name.
    Appery("NGSS_LSV").text(checkedItemsLSVValue);
    -----------------------------------------------------

    I can't debug in the browser, because the browsers Chrome and Firefox both crash.

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

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

  • this is the javascript console:

    Checked items count = 2 loginScreen.js:2113

    checkedItem[0] = 53c993cbe4b0b3c828cb8f97 loginScreen.js:2121
    checkedItem[1] = 53c993cbe4b0b3c828cb8f98 loginScreen.js:2121

    Uncaught TypeError: Cannot read property 'toLowerCase' of undefined
    $.off.on.click loginScreen.

    js:2119

    The list of checkboxes doesn't scroll down nicely either...
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • Uncaught TypeError: Cannot read property 'toLowerCase' of undefined jquery-1.9.1.js:2208

    jQuery.fn.extend.val jquery-1.9.1.js:2208
    $.off.on.click loginScreen.js:2119
    jQuery.event.dispatch jquery-1.9.1.js:3074
    elemData.handle jquery-1.9.1.js:2751
  • (some HTML allowed)
    How does this make you feel?
    Add Image
    I'm

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

  • Hi Alex,

    Please give us your app public link,

    and describe steps to reproduce this problem.

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

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