Cascade conditions

Open in new window

Export Pdf

Result
JavaScript
HTML
Documentation
QR Code


                        
        
            Survey.StylesManager.applyTheme("modern");
        



                
                    var json = {
  "clearInvisibleValues": "onHidden",
  "elements": [
    {
      "type": "radiogroup",
      "name": "age18",
      "title": "Are you 18 years old or older?",
      "isRequired": true,
      "choices": [ "Yes", "No" ],
      "colCount": 0
    },
    {
      "type": "radiogroup",
      "name": "haveKids",
      "title": "Do you have a kid(s)?",
      "visibleIf": "{age18}='Yes'",
      "isRequired": true,
      "choices": [ "Yes", "No" ],
      "colCount": 0
    },
    {
      "type": "dropdown",
      "name": "kids",
      "title": "How many kids do you have",
      "visibleIf": "{haveKids}='Yes'",
      "isRequired": true,
      "choices": [ 1, 2, 3, 4, 5 ]
    },
    {
      "type": "dropdown",
      "name": "kid1Age",
      "title": "The first kid age:",
      "visibleIf": "{kids} >= 1",
      "isRequired": true,
      "choicesMax": 18
    },
    {
      "type": "dropdown",
      "name": "kid2Age",
      "title": "The second kid age:",
      "visibleIf": "{kids} >= 2",
      "isRequired": true,
      "startWithNewLine": false,
      "choicesMax": 18
    },
    {
      "type": "dropdown",
      "name": "kid3Age",
      "title": "The third kid age:",
      "visibleIf": "{kids} >= 3",
      "isRequired": true,
      "choicesMax": 18
    },
    {
      "type": "dropdown",
      "name": "kid4Age",
      "title": "The fourth kid age:",
      "visibleIf": "{kids} >= 4",
      "isRequired": true,
      "startWithNewLine": false,
      "choicesMax": 18
    },
    {
      "type": "dropdown",
      "name": "kid5Age",
      "title": "The fifth kid age:",
      "visibleIf": "{kids} >= 5",
      "isRequired": true,
      "choicesMax": 18
    }
  ]
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
        
            var app = new Vue({
            el: '#surveyElement',
            data:
            {
            survey: survey
            }
            });

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Cascade conditions, Vue Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-vue-ui/survey-vue-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/modern.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
                <survey :survey='survey' />
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

Normally for the example like this, you should have the following visibleIf expression for "the age of the first kid":

visibleIf: "{age18}='Yes' and {haveKids} = 'Yes' and {kids} >= 1"

However, this example works correctly with the following expression:

visibleIf: "{kids} >= 1"

The magic is in setting clearInvisibleValues to "onHidden":

clearInvisibleValues: "onHidden"

A user may set questions "Are you 18 years old or older?" and "Do you have a kid(s)?" to "Yes", then "How many kids do you have" to 1.
As result the "The first kid age:" will be shown. If it's visibleIf equals to visibleIf: "{kids} >= 1" then on setting "Are you 18 years old or older?" to "No", the question will continue to show since the number of kids still equals to 1.
Unless you do not set clearInvisibleValues: "onHidden". In this case the question "Do you have a kid(s)?" becomes invisible and survey clears its value, and then "How many kids do you have" becomes invisible and survey clears the number of kids as well.
At last "The first kid age:" becomes invisible since number of kids is no longer 1.

However, there is a fee for your convenience. The user will have to re-enter its data after questions become visible again. Values for invisible questions are cleared.

Cascade conditions

Simplify visibleIf expression by setting clearInvsibleValues to onHidden

Why We Use Cookies