---
title: Loop and Merge
product: Form Library
description: Learn how to use the Loop and Merge feature to ask the same set of questions for multiple selected items. The loop can adjust dynamically based on user input. View our JavaScript form builder demo to try it firsthand.
framework: jQuery
source: https://surveyjs.io/form-library/examples/loop-and-merge/jquery
index: https://surveyjs.io/form-library/examples/overview.md
---

# Loop and Merge (jQuery)

Loop and Merge is a feature that allows you to repeat a group of questions and combine the responses into one data object. The loop can either iterate over the same set of questions for each item or adjust dynamically based on user input. In this example, you can select one or multiple SurveyJS products, and the survey will then ask a series of repeating questions about each selected product.

## Supported Question Types

A question loop can be created using one of the complex question types:

- [Single-Select Matrix](/form-library/examples/single-selection-matrix-table-question/)
- [Multi-Select Matrix](/form-library/examples/multi-select-matrix-question/)
- [Dynamic Matrix](/form-library/examples/dynamic-matrix-add-new-rows/)
- [Dynamic Panel](/form-library/examples/duplicate-group-of-fields-in-form/)

Single- and Multi-Select Matrices produce a predefined number of loops—one for each matrix row. In contrast, Dynamic Matrix and Dynamic Panel types allow users to add new entries during the survey, generating new loops on the fly.

This example demonstrates a question loop based on a Dynamic Matrix. The number of loops is determined by the number of choices selected in a Checkboxes question, which acts as the loop driver.

## Merge Question Values

To generate a single data object or data array, the loop driving question (Checkboxes) must be linked to the looping question (Dynamic Matrix). To create this connection, assign the same value to the [`valueName`](https://surveyjs.io/form-library/documentation/api-reference/question#valueName) property for both questions. This shared value determines the name of the resulting data object or array. In this demo, `valueName` is set to `"surveyjs-products"`.

If the paired question types return different data formats, additional configuration is needed for merging. For example, a Dynamic Matrix returns an array of objects, while a Checkboxes question typically returns an array of strings. To enable merging, configure the Checkboxes question to return an array of objects by setting the [`valuePropertyName`](https://surveyjs.io/form-library/documentation/api-reference/checkbox-question-model#valuePropertyName) property. For instance, if the Checkboxes question lists products, set `valuePropertyName` to `product`. Each selected item will then be saved as an object with the `product` field containing the selected value.

## Configure the Loop

### Enable the Input-Per-Page Mode 

Loop and Merge requires the survey structure to change and display only one input field per survey page. To enable this structure, set the [`questionsOnPageMode`](/form-library/documentation/api-reference/survey-data-model#questionsOnPageMode) property to `"inputPerPage"` at the survey level.

### Configure Dynamic View Titles

Each step in a loop displays a title. In Multi-Select and Dynamic Matrices, you can customize the title using the [`singleInputTitleTemplate`](/form-library/documentation/api-reference/matrix-table-with-dropdown-list#singleInputTitleTemplate) property. This property supports dynamic placeholders (`{rowIndex}`, `{visibleRowIndex}`, `{rowName}`, and `{rowTitle}`) and text piping from matrix cells and other survey questions.

### Disallow Creating New Loops

The Dynamic Matrix question type allows users to add new rows—effectively creating new loops. However, if the number of loops is already determined by the selections in a loop driving question (such as a Checkboxes question), this feature becomes redundant. Disable it by setting the [`allowAddRows`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#allowAddRows) property to `false` in the Dynamic Matrix configuration and set the initial number of rows to zero by assigning 0 to the [`rowCount`](https://surveyjs.io/form-library/documentation/api-reference/dynamic-matrix-table-question-model#rowCount) property.

If you want to use a Dynamic Panel for the loop, refer to the following example for detailed instructions:

[Breakable Loop](/form-library/examples/breakable-loop/ (linkStyle))

## 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";

const survey = new Model(json);
survey.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
});

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

### `src/json.js`

```js
export const json = {
  "questionsOnPageMode": "inputPerPage",
  "pages": [
    {
      "name": "page1",
      "elements": [
        {
          "type": "checkbox",
          "name": "products",
          "title": "Which SurveyJS products have you used?",
          "valueName": "surveyjs-products",
          "choices": [
            {
              "value": "form-library",
              "text": "Form Library"
            },
            {
              "value": "survey-creator",
              "text": "Survey Creator"
            },
            {
              "value": "dashboard",
              "text": "Dashboard"
            },
            {
              "value": "pdf-generator",
              "text": "PDF Generator"
            }
          ],
          "valuePropertyName": "product"
        },
        {
          "type": "matrixdynamic",
          "name": "product-feedback",
          "title": "Please leave your feedback on selected products",
          "valueName": "surveyjs-products",
          "singleInputTitleTemplate": "Product: {row.product}",
          "columns": [
            {
              "name": "csat",
              "title": "How satisfied are you with the product?",
              "cellType": "rating",
              "rateType": "smileys",
              "scaleColorMode": "colored"
            },
            {
              "name": "valued-features",
              "title": "What product features do you value the most?",
              "cellType": "comment"
            },
            {
              "name": "improvements",
              "title": "What would you improve in the product?",
              "cellType": "comment"
            }
          ],
          "allowAddRows": false,
          "rowCount": 0
        },
        {
          "type": "radiogroup",
          "name": "agreed-on-follow-up",
          "visibleIf": "{surveyjs-products} anyof ['form-library', 'survey-creator', 'dashboard', 'pdf-generator']",
          "title": "Would you mind if we contact you for a follow up?",
          "choices": [
            {
              "value": "yes",
              "text": "Sure!"
            },
            {
              "value": "no",
              "text": "No"
            }
          ]
        },
        {
          "type": "text",
          "name": "email",
          "visibleIf": "{agreed-on-follow-up} = 'yes'",
          "title": "What is your email address?"
        }
      ]
    }
  ],
  "completedHtml": "<h3>Thank you for your feedback!</h3>"
};
```

### `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/loop-and-merge/angular.md)
- [React](https://surveyjs.io/form-library/examples/loop-and-merge/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/loop-and-merge/vue3js.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/loop-and-merge/vanillajs.md)