Use calculated values

Use calculated values in text processing and expressions

                        



var json = {
pages: [
    {
    name: "page1",
    elements: [
        {
        type: "text",
        name: "firstname",
        title: "Please type your First Name",
        isRequired: true
        },
        {
        type: "text",
        name: "lastname",
        startWithNewLine: false,
        title: "Last Name",
        isRequired: true
        },
        {
        type: "text",
        name: "birthdate",
        title: "Please type your Birth date:",
        isRequired: true,
        validators: [
            {
            type: "expression",
            text: "You should be 14 years old or older",
            expression: "{age} > 13"
            },
            {
            type: "expression",
            text: "You should be 90 years old or younger",
            expression: "{age} <= 90"
            }
        ],
        inputType: "date"
        }
    ]
    },
    {
    name: "page2",
    elements: [
        {
        type: "checkbox",
        name: "options",
        title:
            "Dear {fullname}. Based on your age ({age}), we can recommend you the following options. Please choose at least one:",
        isRequired: true,
        choices: [
            {
            value: "option 1",
            text: "Option 1, age < 18",
            visibleIf: "{age} < 18"
            },
            {
            value: "option 2",
            text: "Option 2, age < 18",
            visibleIf: "{age} < 18"
            },
            {
            value: "option 3",
            text: "Option 3, age < 18",
            visibleIf: "{age} < 18"
            },
            {
            value: "option 4",
            text: "Option 4, age >= 18 and age < 50",
            visibleIf: "{age} >= 18 and {age} < 50"
            },
            {
            value: "option 5",
            text: "Option 5, age >= 18 and age < 50",
            visibleIf: "{age} >= 18 and {age} < 50"
            },
            {
            value: "option 6",
            text: "Option 6, age >= 18 and age < 50",
            visibleIf: "{age} >= 18 and {age} < 50"
            },
            {
            value: "option 7",
            text: "Option 7, age >= 50",
            visibleIf: "{age} >= 50"
            },
            {
            value: "option 8",
            text: "Option 8, age >= 50",
            visibleIf: "{age} >= 50"
            },
            {
            value: "option 9",
            text: "Option 9, age >= 50",
            visibleIf: "{age} >= 50"
            }
        ]
        }
    ]
    }
  ],
  calculatedValues: [
      {
        name: "fullname",
        expression: "{firstname} + ', ' + {lastname}"
      },
      {
        name: "age",
        expression: "age({birthdate})",
        includeIntoResult: true
      }
  ]
};

window.survey = new Survey.Model(json);


    survey.onComplete.add(function(result) {
        document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(result.data, null, 3);
    });


$("#surveyElement").Survey({ 
    model: survey 
});


                    
<!DOCTYPE html>
<html>
<head>
    <title>Use calculated values in text processing and expressions, jQuery Survey Library Example</title>


    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/jquery"></script>
<script src="https://surveyjs.azureedge.net/1.1.16/survey.jquery.js"></script>
<link href="https://surveyjs.azureedge.net/1.1.16/survey.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body>
                <div id="surveyElement">
            </div>
    <div id="surveyResult"></div>

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

</body>
</html>

Text processing doesn't support expressions. To deal with it and to allow keep complex expressions simple, we have introduced Calcualted Values in version 1.1.8. Survey class has calculatedValues property, that contains the list of Calculated Value.

CalculatedValue class has 3 properties: name, expression and a boolean property includeIntoResult (false by default). Here is the example of calculated value JSON definition:

{name: "age", expression: "age({birthdate})", includeIntoResult: true}
When the question bithdate is changed, the calculated value is automatically updated it's value (read-only property).