Dynamically Updated Multiple Choice Deselection Bug

Forms
#1

Hello,

I am using the following code to make changes to a previous multiple choice question with a second multiple choice. However, when you deselect an option in the middle of the second multiple choice question, it deselects the next option in line as it is moved to the location the cursor is currently on. Is there a way to fix this bug?

function matchSummary() {
var newselection=fd.field('toselected').value;
fd.field('toselected').options=newselection;
fd.field('toselected').value=newselection;
fd.field('toalltests').value=newselection;
/*
var str1 = fd.field('toselected').value;
var str2 = fd.field('toalltests').value;
var res = str1.concat(str2);
fd.field('memo').value=res;
*/
}
fd.field('toselected').$on('change', matchSummary);

matchSummary();

multiPic
multiPic1813×704 54.2 KB

#2

Hello @mmendes,

From your code, I see that you populate the toselected field with the values from the same field.

What exactly do you want to design? Please provide more details so I could help you out with the code.

#3

Essentially, I want to make an editable shopping cart with two multiple choice checkbox fields. The first field contains all options you can add to the shopping cart, and the second field is the shopping cart. I want to be able to remove items from the shopping cart by unchecking the the checkbox for an option.

The re-population of to selected in the above code was an attempt to get rid of the bug that unchecks items in the shopping cart other than the one I unchecked.

#4

@mmendes,

If you want to dynamically change options of a multiple-choice field based on options selected in another choice field you can use this code:

fd.field('MultipleChoice1').$on('change', function(value) {
    //change options
    fd.field('MultipleChoice2').options = fd.field('MultipleChoice1').value;
    //set the field value
    fd.field('MultipleChoice2').value = fd.field('MultipleChoice1').value;
});
#5

Thank you for the quick reply. I have set up this code in two places, one for the first question, and one for the second question so that they mirror each other's changes. However, when you deselect an option from the second question, the next value in line (that gets moved over when deselection occurs) becomes unchecked, though the .value of the second question still has that option included in it.

In the above screen shot I shared, you can see in 'MultilineText1' a print out of the .value of the first question, followed by the second. As you can see, both selections are printed in 'MultilineText1' twice, meaning that the .value for both questions should be correct. However, as you can see in the screenshot, the 'Creatine Transport Deficiency' has been unchecked, even though it is still included in the .value of the second question. I have added notes to the screenshot so this is easier to see.

This screenshot was made after a deselection of the option preceding 'Creatine Transport Deficiency', and when deselected, 'Creatine Transport Deficiency' was deselected, too, though it is still included in .value as it should be. Why is the check box not checked if it is still included in the .value?

Thanks for the help,
Mike Mendes

#6

multiPicPointOut
multiPicPointOut1813×704 60.7 KB

#7

@mmendes,

Please share the code that you are using.

#8

//Show all selected Tests in the second multiple checkbox field
function summarize() {
var testList = fd.field('toalltests').value;
fd.field('toselected').options = testList;
fd.field('toselected').value = testList;
}
fd.field('toalltests').$on('change', summarize);

summarize();

//Change the First multiple checkbox field to match changes to the summary
function matchSummary() {
var newselection=fd.field('toselected').value;
fd.field('toselected').options=fd.field('toselected').value;
fd.field('toalltests').value=newselection;
var str1 = fd.field('toselected').value;
var str2 = fd.field('toalltests').value;
var res = str1.concat(str2);
fd.field('memo').value=res;
}
fd.field('toselected').$on('change', matchSummary);

matchSummary();
#9

@mmendes,

As I understand, one choice field is primary - stores all possible options, and the other one is the shopping cart that you need to update. Thus, you need to update options and call the function that updates selection on form load only for the shopping cart choice field.

Please see the code.

function updateShoppingCart() {
    //change options
    fd.field('ShoppingCart').options = fd.field('AllOptions').value;
    //set the field value
    fd.field('ShoppingCart').value = fd.field('AllOptions').value;
}

function updateAllOptions() {
    fd.field('AllOptions').value = fd.field('ShoppingCart').value;
}


//update shopping cart when the field is changed
fd.field('AllOptions').$on('change', updateShoppingCart)
//update shopping cart on form load
updateShoppingCart()

//update all options field
fd.field('ShoppingCart').$on('change', updateAllOptions)
#10

I have implemented the code you suggested as following:

//update tests selected shopping cart
function summarize() {
fd.field('toselected').options = fd.field('toalltests').value;
fd.field('toselected').value = fd.field('toalltests').value;
}

//update test selections (All options)
function matchSummary() {
    fd.field('toalltests').value=fd.field('toselected').value;
}

fd.field('toalltests').$on('change', summarize);

summarize();

fd.field('toselected').$on('change', matchSummary);

However, I am still getting the bug I described in the screenshot above. I have included this screenshot again to show what happens when deselecting an option in the middle of the shopping cart list.

multiPicPointOut
multiPicPointOut1813×704 60.7 KB

#11

Have we had any updates to this inquiry?

Thanks,
Michael Mendes

#12

Hello @mmendes,

I couldn't reproduce the issue on my form.

Are you using Public Forms or SharePoint Forms?
If you are using Public forms, are you using desktop or web designer?

Please export the form and share it so I could test it on my side.

#13

I am using Public Forms with the desktop designer. I have attached the exported form.

Thank you!

GGC Diagnostic Lab Requisition Form.xfds (196.1 KB)

#14

@mmendes,

I've added the line to the code that checks all inputs, please try it out:

fd.rendered(function () {
 function updateShoppingCart() {
 console.log('updateShoppingCart');
    //change options
    fd.field('toselected').options = fd.field('toalltests').value;
    //set the field value
    fd.field('toselected').value = fd.field('toalltests').value;
}

function updateAllOptions() {
console.log('updateAllOptions');

    fd.field('toalltests').value = fd.field('toselected').value;
    $(fd.field('toselected').$el).find('input').prop('checked', true);
}


//update shopping cart when the field is changed
fd.field('toalltests').$on('change', updateShoppingCart)
//update shopping cart on form load
updateShoppingCart()

//update all options field
fd.field('toselected').$on('change', updateAllOptions)

});