Cart Licenses Contact Support Online Creator Login/Register
Try
Free
v 1.9.37

Use calculated values


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        



                
                    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(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>Use calculated values, 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>
Settings

Text processing doesn't support expressions. To deal with it and to allow keep complex expressions simple, we have introduced Calculated 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).

Dismiss

Tell us what you think

Help us serve you better by taking this brief
survey. We are interested to learn more about
your experience of using our libraries.

We'd really appreciate your feedback.

Approximate time to complete: 2 min.

Start the survey