--- title: Expression product: Form Library description: Expression is a read-only question type that dynamically calculates values based on user input or predefined variables. This free demo for JavaScript shows how expressions can be used to estimate the total cost of a pizza order in real-time by multiplying the quantity by the price for each item on the menu and summing up these values. framework: Vanilla JS source: https://surveyjs.io/form-library/examples/expression-question-for-dynamic-form-calculations/vanillajs index: https://surveyjs.io/form-library/examples/overview.md --- # Expression (Vanilla JS) Expression is a read-only question type used to dynamically calculate values based on user input or predefined variables and display the calculated values in your form or survey. In this demo, expression questions calculate the cost of each pizza based on selected size and quantity and add up the costs to display the total of an order. To create an Expression question, add an object to the [`elements`](https://surveyjs.io/form-library/documentation/api-reference/page-model#elements) array and specify the following properties within this object: - `type` A question [type](https://surveyjs.io/form-library/documentation/api-reference/expression-model#getType). Set this property to `"expression"`. - [`name`](https://surveyjs.io/form-library/documentation/api-reference/expression-model#name) A unique name that identifies the question. - [`title`](https://surveyjs.io/form-library/documentation/api-reference/expression-model#title) A title for the question. - [`expression`](https://surveyjs.io/form-library/documentation/api-reference/expression-model#expression) An expression used to calculate the value you want to display (see [Expressions](https://surveyjs.io/form-library/documentation/design-survey/conditional-logic#expressions)). - *(Optional)* [`description`](https://surveyjs.io/form-library/documentation/api-reference/expression-model#description) Explanatory text displayed under the title. Refer to the `json.js` file listing for more information. ## Files ### `public/index.html` ```html
``` ### `src/index.css` ```css /* You can add your custom CSS here. */ ``` ### `src/index.js` ```js import { Model } from "survey-core"; import "survey-js-ui"; import "survey-core/survey-core.min.css"; import "./index.css"; import { json } from "./json"; const survey = new Model(json); survey.onComplete.add((sender, options) => { console.log(JSON.stringify(sender.data, null, 3)); }); survey.render(document.getElementById("surveyElement")); ``` ### `src/json.js` ```js export const json = { "elements": [ { "type": "panel", "name": "neapolitan", "elements": [ { "type": "expression", "name": "price_n", "minWidth": "220px", "title": "Pizza Neapolitan", "description": "tomato sauce, mozzarella, anchovies, bazil", "expression": "5 + {size_n}", "displayStyle": "currency" }, { "type": "image", "name": "pic_n", "width": "180px", "minWidth": "180px", "maxWidth": "180px", "startWithNewLine": false, "imageLink": "https://api.surveyjs.io/private/Surveys/files?name=c5b0302a-d6c8-46b4-ac57-7d519d0df0d1", "contentMode": "image", "imageFit": "cover", "imageHeight": 80, "imageWidth": 180 }, { "type": "dropdown", "name": "size_n", "minWidth": "220px", "title": "Size", "titleLocation": "left", "defaultValue": 1, "choices": [ { "value": 0, "text": "Small" }, { "value": 1, "text": "Medium" }, { "value": 2, "text": "Large" } ], "allowClear": false }, { "type": "dropdown", "name": "qty_n", "minWidth": "220px", "startWithNewLine": false, "title": "Qty", "titleLocation": "left", "choices": [ 1, 2, 3, 4, 5 ] } ] }, { "type": "panel", "name": "pepperoni", "elements": [ { "type": "expression", "name": "price_p", "title": "Pepperoni", "description": "tomato sauce, pepperoni, red peppers, onion", "expression": "5 + {size_p}", "displayStyle": "currency" }, { "type": "image", "name": "pic_p", "width": "180px", "minWidth": "180px", "maxWidth": "180px", "startWithNewLine": false, "imageLink": "https://api.surveyjs.io/private/Surveys/files?name=8bcd88b7-df19-466d-8622-19100e400383", "contentMode": "image", "imageFit": "cover", "imageHeight": 80, "imageWidth": 180 }, { "type": "dropdown", "name": "size_p", "minWidth": "220px", "title": "Size", "titleLocation": "left", "defaultValue": 1, "choicesFromQuestion": "size_n", "allowClear": false }, { "type": "dropdown", "name": "qty_p", "minWidth": "220px", "startWithNewLine": false, "title": "Qty", "titleLocation": "left", "choicesFromQuestion": "qty_n" } ] }, { "type": "panel", "name": "marinara", "elements": [ { "type": "expression", "name": "price_m", "title": "Marinara", "description": "tomato sauce, tuna, shrimps, mushrooms, cheese, onion", "expression": "5 + {size_m}", "displayStyle": "currency" }, { "type": "image", "name": "pic_m", "width": "180px", "minWidth": "180px", "maxWidth": "180px", "startWithNewLine": false, "imageLink": "https://api.surveyjs.io/private/Surveys/files?name=24735b69-0ffe-4e49-9c90-1d9db1c8b83b", "contentMode": "image", "imageFit": "cover", "imageHeight": 80, "imageWidth": 180 }, { "type": "dropdown", "name": "size_m", "minWidth": "220px", "title": "Size", "titleLocation": "left", "defaultValue": 1, "choicesFromQuestion": "size_n", "allowClear": false }, { "type": "dropdown", "name": "qty_m", "minWidth": "220px", "startWithNewLine": false, "title": "Qty", "titleLocation": "left", "choicesFromQuestion": "qty_n" } ] }, { "type": "expression", "name": "total", "title": "Total", "expression": "{price_n} * {qty_n} + {price_m} * {qty_m} + {price_p} * {qty_p}", "displayStyle": "currency" } ], "questionErrorLocation": "bottom" }; ``` ### `src/theme.js` ```js export const themeJson = {}; ``` ### `package.json` ```json { "dependencies": { "survey-core": "latest", "survey-js-ui": "latest" } } ``` ## Other Frameworks - [Angular](https://surveyjs.io/form-library/examples/expression-question-for-dynamic-form-calculations/angular.md) - [React](https://surveyjs.io/form-library/examples/expression-question-for-dynamic-form-calculations/reactjs.md) - [Vue 3](https://surveyjs.io/form-library/examples/expression-question-for-dynamic-form-calculations/vue3js.md) - [jQuery](https://surveyjs.io/form-library/examples/expression-question-for-dynamic-form-calculations/jquery.md)