---
title: Limit to One Response
product: Form Library
description: To prevent users from creating duplicate submissions when refreshing a page, you can assign a unique cookie value that will be set in the user's browser after they complete your survey. This demo for the JavaScript shows how to block multiple submissions from the same user using cookie protection.
framework: React
source: https://surveyjs.io/form-library/examples/how-to-prevent-duplicate-form-submissions/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Limit to One Response (React)

To prevent users from submitting the same form multiple times when refreshing a page, you can assign a unique cookie value for your survey. This cookie will be set in a respondent's browser upon survey completion to discourage repetitive survey submissions. This demo shows how to set up a unique submission feature using cookie protection. To test this functionality, complete the survey in this example and reload the page. Instead of the survey, you will see a message telling that you have already completed this survey. You can reset the example by clicking "Delete cookies and reload page" in Settings on the right.

To add cookie protection to your survey, specify the [`cookieName`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#cookieName) property. Once the survey is completed, a cookie with this specified name will be set in the respondent's browser. If they attempt to participate again, they'll be directed to a page indicating that they have already taken the survey. To customize the message on this page, assign custom HTML markup to the [`completedBeforeHtml`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#completedBeforeHtml) property.

> While cookies remain a simple and convenient way to prevent duplicate form submissions, it does not guarantee 100% uniqueness. Respondents can still clear cookies in their browser or use a different browser to bypass the cookie protection. If the nature of your survey requires higher levels of response integrity, you may want to consider additional measures, such as user authentication, IP tracking, or other advanced techniques.

## 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/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

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

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "completedBeforeHtml":"<div style='margin-top: 10px;'><h3 style='margin-top: 30px;'>You have already completed this survey.</h3><h4 style='margin-top: 15px;'>Open example settings to delete cookies and reload the page.</h4></div>",
  "cookieName": "car-survey-id",
  "elements": [
    {
      "type": "text",
      "name": "name",
      "title": "Name"
    },
    {
      "type": "text",
      "name": "email",
      "title": "Email address"
    },
    {
      "type": "checkbox",
      "name": "car",
      "title": "Which car do you drive?",
      "isRequired": true,
      "colCount": 4,
      "showNoneItem": true,
      "choices": [
        "Ford",
        "Vauxhall",
        "Volkswagen",
        "Nissan",
        "Audi",
        "Mercedes-Benz",
        "BMW",
        "Peugeot",
        "Toyota",
        "Citroen"
      ]
    }
  ]
};
```

### `src/theme.js`

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

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/how-to-prevent-duplicate-form-submissions/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/how-to-prevent-duplicate-form-submissions/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/how-to-prevent-duplicate-form-submissions/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/how-to-prevent-duplicate-form-submissions/vanillajs.md)