Issue T643
Visible to All Users

Problem with storing answers for checkbox questions.

created 7 years ago (modified 7 years ago)

I'm creating a survey where I want a user's answers to persist when they return to the survey or start the survey over. To do this, as part of the onComplete, I set a cookie equal to a stringified version of result.data. Then I use onAfterRenderSurvey to see if this cookie exists. If it does, I loop through the cookie and use survey.setValue to set the stored version of each question. This works great for the radio button questions, and at first glance it looks like it works for the checkboxes, but there is a problem with them. The correct values get set for the checkboxes, but something is not handled correctly when the checkboxes are toggled again.

I've set up a shortened version of my survey to demonstrate the issue here: https://www.innovobenefits.com/survey-test/. I'm logging the survey data to the console each time a question is changed so you can see the issue. On the first page, answer the questions however you want. On the second page, select "Yes" for the first question. Then select the first checkbox for each of the remaining two questions and click "Complete"

Now click "Restart", which will take you back to the first page. Click "Next" to get to the second page. Look at the latest log of survey.data in the console and you will see that q4 and q5 both show the correct answer of "A". If you click on A again for either of the questions, however, you'll see that instead of removing A from the answer, it adds another one so that the answer is now ["A","A"]. It appears that while the form control is showing that it is checked, it doesn't know that it is, so unchecking it actually has the effect of checking it. Maybe the way I'm setting the answers is not the correct method?

I am using the latest jQuery version of survey.js and also icheckmatrix. The javascript for this can be found here: https://www.innovobenefits.com/survey-test/js/index.js

Let me know if you need any additional information. Thanks!

Answers

created 7 years ago

It only occurs when using the iCheck widget, so you need to add the following code to the header of your example:

<script src="https://unpkg.com/icheck@1.0.2"></script>
<link rel="stylesheet" href="https://unpkg.com/icheck@1.0.2/skins/square/blue.css">
<script src="https://unpkg.com/surveyjs-widgets"></script>

Then log the survey results by adding this to the onComplete function so you can see the issue:

console.log(result.data);

Now, click Ford and click Complete. The car array in the results will show 1 answer of "Ford"
Click Restart Survey.
Click Ford again to uncheck it and click Complete.
The car array in the results still shows 1 answer of "Ford", and clicking Restart Survey will show that it is selected instead of unselected.
If you click it twice, to uncheck it and check it again, then click Complete, you will see that the car array in the results now shows 2 answers of "Ford".
There is no way to unselect a value once it has been selected.

BTW, you'll note that the checkboxes also appear as radio buttons rather then checkboxes. I was able to fix this with my CSS, but I can't fix the functionality of the checkboxes on my end.

    Comments (3)

      Thank you for the clarification. I've reproduced the issue on our side. We'll fix it.

      Thanks, Serge
      SurveyJS Team

        The issue has been fixed via the https://github.com/surveyjs/widgets/commit/6ed485485b9386cd1b27c56d7b12ac324b3d457e commit
        Fix will be available in the nearest update

        Thanks, Serge
        SurveyJS Team

          That was quick! Thanks for your help.

          created 7 years ago

          Hello,
          Why don't you use the local storage? That is the way to go.
          Here is the example that does exactly what you need: https://surveyjs.io/Examples/Library/?id=real-patient-history
          Here is the code:

          JavaScript
          var storageName = "survey_patient_history"; function saveSurveyData(survey) { var data = survey.data; data.pageNo = survey.currentPageNo; window .localStorage .setItem(storageName, JSON.stringify(data)); } survey .onPartialSend .add(function (survey) { saveSurveyData(survey); }); survey .onComplete .add(function (survey, options) { saveSurveyData(survey); }); survey.sendResultOnPageNext = true; var prevData = window .localStorage .getItem(storageName) || null; if (prevData) { var data = JSON.parse(prevData); survey.data = data; if (data.pageNo) { survey.currentPageNo = data.pageNo; } }

          Thank you,
          Andrew
          SurveyJS Team

            Show previous comments (1)

              No errors in the console. And it renders the answers properly. The problem comes when you try to change one of the already selected checkboxes. Unchecking it actually adds it to the data instead of removing it, so it ends up in the answers array twice. If you follow along with the steps in the initial ticket you'll see what I mean. It's like the action triggered by toggling the checkbox doesn't know that it is already selected.

                Ok, we will take a look what is going on with iCheck.

                Thank you,
                Andrew
                SurveyJS Team

                DK DK
                Dmitry Kurmanov 7 years ago

                  Hello! I've tried to find the problem. And it is hard to do it without minimal example for reproducing the bug. So I've created an example with reload survey button. https://plnkr.co/edit/5CI2e3NW7NShkxP6WvMm?p=preview Could you please check it and try to reproduce the problem?