---
title: Read-Only / Display Mode
product: Form Library
description: You can configure to display your form - both filled out and new - in protected display mode to disable its editing and prevent any unwanted changes. View a free demo example for JavaScript to learn more.
framework: jQuery
source: https://surveyjs.io/form-library/examples/prevent-form-editing-with-read-only-mode/jquery
index: https://surveyjs.io/form-library/examples/overview.md
---

# Read-Only / Display Mode (jQuery)

Read-only mode enables you to display your surveys or forms without allowing users to modify them. This mode is useful if you want to let respondents review their answers before submitting them, prevent unintentional alterations in completed forms, or limit access to your form based on user permissions. In this demo, a survey is already set to read-only mode. You can use the "Enable read-only mode" checkbox in Settings to manage read-only mode at runtime.

If you want to enable read-only mode for your survey in code, set `SurveyModel`'s [`readOnly`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#readOnly) property to `true` in the survey JSON schema or in your JavaScript code. This example demonstrates the latter case.

## 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));
});
survey.data = {
    "qualities": {
        "affordable": "3",
        "does-what-it-claims": "4",
        "better-than-others": "3",
        "easy-to-use": "5"
    },
    "satisfaction-score": "4",
    "recommend": "4",
    "suggestions": "24/7 support would help a lot.",
    "price-comparison": "Not sure",
    "current-price": "correct",
    "price-limits": {
        "highest": "450",
        "lowest": "200"
    },
    "email": "john.doe@example.org"
};
survey.readOnly = true;


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

### `src/json.js`

```js
export const json = {
  "pages": [{
    "elements": [{
      "type": "matrix",
      "name": "qualities",
      "title": "Please indicate if you agree or disagree with the following statements",
      "columns": [{
        "value": 5,
        "text": "Strongly agree"
      }, {
        "value": 4,
        "text": "Agree"
      }, {
        "value": 3,
        "text": "Neutral"
      }, {
        "value": 2,
        "text": "Disagree"
      }, {
        "value": 1,
        "text": "Strongly disagree"
      }],
      "rows": [{
        "value": "affordable",
        "text": "Product is affordable"
      }, {
        "value": "does-what-it-claims",
        "text": "Product does what it claims"
      }, {
        "value": "better-than-others",
        "text": "Product is better than other products on the market"
      },{
        "value": "easy-to-use",
        "text": "Product is easy to use"
      }]
    }, {
      "type": "rating",
      "name": "satisfaction-score",
      "title": "How satisfied are you with our product?",
      "minRateDescription": "Not satisfied",
      "maxRateDescription": "Completely satisfied"
    }, {
      "type": "rating",
      "name": "recommend",
      "visibleIf": "{satisfaction-score} > 3",
      "title": "How likely are you to recommend our product to a friend or co-worker?",
      "minRateDescription": "Will not recommend",
      "maxRateDescription": "I will recommend"
    }, {
      "type": "comment",
      "name": "suggestions",
      "title": "What would make you more satisfied with our product?"
    }]
  }, {
    "elements": [{
      "type": "radiogroup",
      "name": "price-comparison",
      "title": "Compared to our competitors, do you feel our product is:",
      "choices": [
        "Less expensive",
        "Priced about the same",
        "More expensive",
        "Not sure"
      ]
    }, {
      "type": "radiogroup",
      "name": "current-price",
      "title": "Do you feel our current price is merited by our product?",
      "choices": [
        "correct|Yes, the price is about right",
        "low|No, the price is too low for your product",
        "high|No, the price is too high for your product"
      ]
    }, {
      "type": "multipletext",
      "name": "price-limits",
      "title": "What is the highest and lowest price you would pay for a product like ours?",
      "items": [{
        "name": "highest",
        "title": "Highest"
      }, {
        "name": "lowest",
        "title": "Lowest"
      }]
    }]
  }, {
    "elements": [{
      "type": "text",
      "name": "email",
      "title": "Please leave your email address if you would like us to contact you."
    }]
  }]
};
```

### `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/prevent-form-editing-with-read-only-mode/angular.md)
- [React](https://surveyjs.io/form-library/examples/prevent-form-editing-with-read-only-mode/reactjs.md)
- [Vue 3](https://surveyjs.io/form-library/examples/prevent-form-editing-with-read-only-mode/vue3js.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/prevent-form-editing-with-read-only-mode/vanillajs.md)