Survey.StylesManager.applyTheme("default");
var json = { clearInvisibleValues: "onHidden",
questions: [
{ 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,
startWithNewLine: false,
"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,
startWithNewLine: false,
"choicesMax": 18
}
]};
window.survey = new Survey.Model(json);
survey.onComplete.add(function(result) {
document.querySelector('#surveyResult').textContent =
"Result JSON:\n" + JSON.stringify(result.data, null, 3);
});
var app = new Vue({
el: '#surveyElement',
data:
{
survey: survey
}
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simplify visibleIf expression by setting clearInvsibleValues to onHidden, Vue Survey Library Example</title>
<meta name="viewport" content="width=device-width" />
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="/DevBuilds/survey-vue/survey.vue.min.js"></script>
<link href="/DevBuilds/survey-knockout/survey.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.