---
title: Complex Questions in Expressions
product: Form Library
description: Learn how to access values of individual items in multiple textboxes or specific matrix cells and use them in expressions, form branching, and visibility rules for any follow-up questions. Try out a live JavaScript form builder demo with a step-by-step implementation guide.
framework: jQuery
source: https://surveyjs.io/form-library/examples/use-and-represent-complex-questions-in-expressions/jquery
index: https://surveyjs.io/form-library/examples/overview.md
---

# Complex Questions in Expressions (jQuery)

Complex questions can contain more than one value. Such questions include Single-, Multi-Select, and Dynamic Matrices, Dynamic Panels, and Multiple Textboxes questions. This example demonstrates how to access different values within complex questions.

To access a value from outside a complex question, use the question's name and the name of its element (item, row, column) to which the value belongs:

<div class="v2-class---doc-table-container">
  <table class="v2-class---doc-table-container__table">
    <thead>
      <tr>
        <th>Question Type</th>
        <th>Syntax</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><a href="/form-library/documentation/api-reference/multiple-text-entry-question-model">Multiple Textboxes</a></td>
        <td><code>{questionname.itemname}</code></td>
      </tr>
      <tr>
        <td><a href="/form-library/documentation/api-reference/matrix-table-question-model">Single-Select Matrix</a></td>
        <td><code>{questionname.rowname}</code></td>
      </tr>
      <tr>
        <td rowspan="2" style="vertical-align:middle"><a href="/form-library/documentation/api-reference/matrix-table-with-dropdown-list">Multi-Select Matrix</a></td>
        <td><code>{questionname.rowname.columnname}</code></td>
      </tr>
      <tr>
        <td><code>{questionname-total.columnname}</code> (accesses a cell in the total row)</td>
      </tr>
    </tbody>
  </table>
</div>

This demo shows a [Multiple Textboxes](/form-library/documentation/api-reference/multiple-text-entry-question-model) question that asks users to enter contact details, including an email address. Under this question, the form displays an "I agree to receive newsletters" checkbox, which is visible only if an email address is provided. This checkbox is a [Yes/No (Boolean)](/form-library/documentation/api-reference/boolean-question-model) question. Its [`visibleIf`](/form-library/documentation/api-reference/boolean-question-model#visibleIf) expression accesses the email address input field of the Multiple Textboxes question using the notation from the table above.

To access a value (question or cell) within a [Dynamic Panel](/form-library/documentation/api-reference/dynamic-panel-model) or [Dynamic Matrix](/form-library/documentation/api-reference/dynamic-matrix-table-question-model) from outside, use a zero-based index:

| Question Type                                                          | Syntax                                     |
| ---------------------------------------------------------------------- | ------------------------------------------ |
| [Dynamic Panel](/form-library/documentation/api-reference/dynamic-panel-model)   | `{dynamicpanelname[index].questionname}`   |
| [Dynamic Matrix](/form-library/documentation/api-reference/dynamic-matrix-table-question-model) | `{dynamicmatrixname[rowindex].columnname}` |

To access a cell or question from inside a matrix, panel, or composite question, use the `row`, `panel`, `parentPanel`, and `composite` prefixes:

<div class="v2-class---doc-table-container">
  <table class="v2-class---doc-table-container__table">
    <thead>
      <tr>
        <th>Question Type</th>
        <th>Syntax</th>
        <th>Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td rowspan="3" style="vertical-align:middle"><a href="/form-library/documentation/api-reference/matrix-table-question-model">Single-Select Matrix</a>, <a href="/form-library/documentation/api-reference/matrix-table-with-dropdown-list">Multi-Select Matrix</a>, <a href="/form-library/documentation/api-reference/dynamic-matrix-table-question-model">Dynamic Matrix</a></td>
        <td><code>{row.columnname}</code></td>
        <td>Accesses a cell in the same row.</td>
      </tr>
      <tr>
        <td style="vertical-align:middle"><code>{rowName}</code></td>
        <td>Accesses the row name (the <code>value</code> property within objects in the <a href="https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#rows"><code>rows</code></a> array). Use this placeholder if you need to distinguish between matrix rows.</td>
      </tr>
      <tr>
        <td style="vertical-align:middle"><code>{rowTitle}</code></td>
        <td>Accesses the row title (the <code>text</code> property within objects in the <a href="https://surveyjs.io/form-library/documentation/api-reference/matrix-table-with-dropdown-list#rows"><code>rows</code></a> array).</td>
      </tr>
      <tr>
        <td rowspan="2" style="vertical-align:middle"><a href="/form-library/documentation/api-reference/dynamic-panel-model">Dynamic Panel</a></td>
        <td><code>{panel.questionname}</code></td>
        <td>Accesses a question within the same panel.</td>
      </tr>
      <tr>
        <td style="vertical-align:middle"><code>{parentPanel.questionname}</code></td>
        <td>Accesses a question within a parent Dynamic Panel.<br>Applies when one Dynamic Panel question is nested in another.</td>
      </tr>
      <tr>
        <td><a href="/form-library/documentation/customize-question-types/create-composite-question-types">Composite questions</a></td>
        <td><code>{composite.questionname}</code></td>
        <td>Accesses a question within the same composite question.</td>
      </tr>
    </tbody>
  </table>
</div>

In this demo, the `row` prefix is used to calculate totals in each matrix row and enable or disable the Quantity column cells based on a condition. Refer to the `json.js` file for code examples.

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import $ from "jquery";
import { Model } from "survey-core";
import "survey-js-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";
import { Serializer, registerFunction } from "survey-core";

// Add the `price` property to choice options
Serializer.addProperty("itemvalue", "price:number");

// A custom function that returns a selected item's price
const getItemPrice = function (params) {
    // `this.row` is available only within matrix cells
    const question = this.row ? this.row.getQuestionByColumnName(params[0]) : null;
    if (!question) return 0;
    const selectedItem = question.selectedItem;
    // Return 0 if a user haven't selected an item yet
    return selectedItem ? selectedItem.price : 0;
};
registerFunction({ name: "getItemPrice", func: getItemPrice });

const survey = new Model(json);
survey.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
});
survey.data = {
    "orders": [{
        "id": 1,
        "phoneModel": "iPhone15ProMax-1024",
        "quantity": 1,
    }, {
        "id": 2,
        "phoneModel": "iPhone15-256",
        "quantity": 2,
    }, {
        "id": 3,
        "phoneModel": "iPhone14Pro-512",
        "quantity": 2,
    }],
    "subscribed": true
};

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

### `src/json.js`

```js
export const json = {
  "calculatedValues": [
    {
      "name": "totalExpr",
      "expression": "sumInArray({orders}, 'total')"
    },
    {
      "name": "10%DiscountExpr",
      "expression": "{totalExpr} - ({totalExpr} * 0.1)"
    },
    {
      "name": "15%DiscountExpr",
      "expression": "{totalExpr} - ({totalExpr} * 0.15)"
    },
    {
      "name": "20%DiscountExpr",
      "expression": "{totalExpr} - ({totalExpr} * 0.2)"
    }
  ],
  "elements": [
    {
      "type": "matrixdynamic",
      "name": "orders",
      "minRowCount": 1,
      "titleLocation": "hidden",
      "addRowText": "Add new item",
      "columns": [
        {
          "name": "id",
          "title": "Id",
          "cellType": "expression",
          "expression": "{rowIndex}",
          "visible": false
        },
        {
          "name": "phoneModel",
          "title": "Phone model",
          "isRequired": true,
          "cellType": "dropdown",
          "choices": [
            { "text": "iPhone 15 Pro Max, 256GB", "value": "iPhone15ProMax-256", "price": 1199 },
            { "text": "iPhone 15 Pro Max, 512GB", "value": "iPhone15ProMax-512", "price": 1399 },
            { "text": "iPhone 15 Pro Max, 1TB", "value": "iPhone15ProMax-1024", "price": 1599 },
            { "text": "iPhone 15 Pro, 128GB", "value": "iPhone15Pro-128", "price": 999 },
            { "text": "iPhone 15 Pro, 256GB", "value": "iPhone15Pro-256", "price": 1099 },
            { "text": "iPhone 15 Pro, 512GB", "value": "iPhone15Pro-512", "price": 1299 },
            { "text": "iPhone 15 Pro, 1TB", "value": "iPhone15Pro-1024", "price": 1499 },
            { "text": "iPhone 15 Plus, 128GB", "value": "iPhone15Plus-128", "price": 899 },
            { "text": "iPhone 15 Plus, 256GB", "value": "iPhone15Plus-256", "price": 999 },
            { "text": "iPhone 15 Plus, 512GB", "value": "iPhone15Plus-512", "price": 1199 },
            { "text": "iPhone 15, 128GB", "value": "iPhone15-128", "price": 799 },
            { "text": "iPhone 15, 256GB", "value": "iPhone15-256", "price": 899 },
            { "text": "iPhone 15, 512GB", "value": "iPhone15-512", "price": 1099 },
            { "text": "iPhone 14 Pro Max, 256GB", "value": "iPhone14ProMax-256", "price": 1099 },
            { "text": "iPhone 14 Pro Max, 512GB", "value": "iPhone14ProMax-512", "price": 1299 },
            { "text": "iPhone 14 Pro Max, 1TB", "value": "iPhone14ProMax-1024", "price": 1499 },
            { "text": "iPhone 14 Pro, 128GB", "value": "iPhone14Pro-128", "price": 899 },
            { "text": "iPhone 14 Pro, 256GB", "value": "iPhone14Pro-256", "price": 999 },
            { "text": "iPhone 14 Pro, 512GB", "value": "iPhone14Pro-512", "price": 1199 },
            { "text": "iPhone 14 Pro, 1TB", "value": "iPhone14Pro-1024", "price": 1399 },
            { "text": "iPhone 14 Plus, 128GB", "value": "iPhone14Plus-128", "price": 799 },
            { "text": "iPhone 14 Plus, 256GB", "value": "iPhone14Plus-256", "price": 899 },
            { "text": "iPhone 14 Plus, 512GB", "value": "iPhone14Plus-512", "price": 1099 },
            { "text": "iPhone 14, 128GB", "value": "iPhone14-128", "price": 699 },
            { "text": "iPhone 14, 256GB", "value": "iPhone14-256", "price": 799 },
            { "text": "iPhone 14, 512GB", "value": "iPhone14-512", "price": 999 }
          ]
        },
        {
          "name": "price",
          "title": "Price",
          "cellType": "expression",
          "expression": "getItemPrice('phoneModel')",
          "displayStyle": "currency"
        },
        {
          "name": "quantity",
          "title": "Quantity",
          "isRequired": true,
          "cellType": "text",
          "inputType": "number",
          "min": 1,
          "max": 100,
          "defaultValue": 1,
          "textUpdateMode": "onTyping",
          "enableIf": "{row.phoneModel} notempty"
        },
        {
          "name": "total",
          "title": "Total",
          "cellType": "expression",
          "expression": "{row.quantity} * {row.price}",
          "displayStyle": "currency"
        }
      ]
    },
    {
      "type": "html",
      "name": "totalHtml",
      "html": "<p style=\"text-align:right\"><b>Total: <ins>${totalExpr}</ins></b></p>",
      "visibleIf": "{totalExpr} < 3000"
    },
    {
      "type": "html",
      "name": "10%DiscountHtml",
      "html": "<p style=\"text-align:right\"><b>Total: <del>${totalExpr}</del> <ins>${10%DiscountExpr}</ins></b> (-10%)</p>",
      "visibleIf": "{totalExpr} >= 3000 and {totalExpr} < 5000"
    },
    {
      "type": "html",
      "name": "15%DiscountHtml",
      "html": "<p style=\"text-align:right\"><b>Total: <del>${totalExpr}</del> <ins>${15%DiscountExpr}</ins></b> (-15%)</p>",
      "visibleIf": "{totalExpr} >= 5000 and {totalExpr} < 7000"
    },
    {
      "type": "html",
      "name": "20%DiscountHtml",
      "html": "<p style=\"text-align:right\"><b>Total: <del>${totalExpr}</del> <ins>${20%DiscountExpr}</ins></b> (-20%)</p>",
      "visibleIf": "{totalExpr} >= 7000"
    },
    {
      "type": "multipletext",
      "name": "contactDetails",
      "title": "Enter contact details",
      "items": [
        { "name": "name", "title": "Full name", "isRequired": true },
        { "name": "address", "title": "Shipping address", "isRequired": true },
        { "name": "phone", "title": "Phone", "isRequired": true },
        { "name": "email", "title": "Email", "isRequired": true, "validators": [{ "type": "email" }] }
      ],
      "itemTitleWidth": "90px",
      "visibleIf": "sumInArray({orders}, 'total') > 0"
    },
    {
      "type": "boolean",
      "name": "subscribed",
      "displayMode": "checkbox",
      "title": "I agree to receive weekly newsletters",
      "defaultValue": true,
      "visibleIf": "{contactDetails.email} notempty"
    }
  ],
  "completedHtml": "<h4>Thank you for your order!</h4><p>Your order will be shipped within 5 days. We'll send you an email with order details shortly.</p>"
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "jquery": "latest",
    "survey-core": "latest",
    "survey-js-ui": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/use-and-represent-complex-questions-in-expressions/angular.md)
- [React](https://surveyjs.io/form-library/examples/use-and-represent-complex-questions-in-expressions/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/use-and-represent-complex-questions-in-expressions/vue3js.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/use-and-represent-complex-questions-in-expressions/vanillajs.md)