Cascade conditions


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    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);
            });
        
        
            $("#surveyElement").Survey({
            model: survey 
            });

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

</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
            </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

Why We Use Cookies

Tell us what you think