---
title: Move to the Next Page Automatically
product: Form Library
description: Make survey taking an absolute breeze by enabling your respondents to jump to the next page right after they selected an answer and/or auto submit the data at the end. View our free example for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/automatically-move-to-next-page-if-answer-selected/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Move to the Next Page Automatically (React)

In most surveys, respondents should click the Next button to proceed to the following page. This may be tiresome, especially if the survey contains many pages with only one question per page. In this case, you can enable auto-advance. With this feature, a survey automatically switches to the next page when all questions on the current page are answered and submits survey results once the survey is completed. To activate auto-advance, set the [`autoAdvanceEnabled`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#autoAdvanceEnabled) property to `true`.

Optionally, you can hide navigation buttons: Start, Next, Previous, Preview, and Complete. Disable the [`showNavigationButtons`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#showNavigationButtons) property in a survey JSON schema to hide all the buttons. This demo disables the `showNavigationButtons` property within `SurveyModel`'s [`onStarted`](https://surveyjs.io/form-library/documentation/api-reference/survey-data-model#onStarted) event handler to hide all buttons except the Start button.

## 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));
    });
    survey.onStarted.add(() => {
        survey.showNavigationButtons = false;
    });
    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 = {
  "autoAdvanceEnabled": true,
  "title": "American History",
  "showProgressBar": true,
  "progressBarLocation": "bottom",
  "showTimer": true,
  "timeLimitPerPage": 10,
  "timeLimit": 25,
  "firstPageIsStartPage": true,
  "startSurveyText": "Start Quiz",
  "pages": [
    {
      "elements": [
        {
          "type": "html",
          "html": "You are about to start a quiz on American history. <br>You will have 10 seconds for every question and 25 seconds to end the quiz.<br>Enter your name below and click <b>Start Quiz</b> to begin."
        },
        {
          "type": "text",
          "name": "username",
          "titleLocation": "hidden",
          "isRequired": true,
          "maxLength": 25
        }
      ]
    },
    {
      "elements": [
        {
          "type": "radiogroup",
          "name": "civilwar",
          "title": "When was the American Civil War?",
          "choices": [
            "1796-1803",
            "1810-1814",
            "1861-1865",
            "1939-1945"
          ],
          "correctAnswer": "1861-1865"
        }
      ]
    },
    {
      "elements": [
        {
          "type": "radiogroup",
          "name": "libertyordeath",
          "title": "Whose quote is this: \"Give me liberty, or give me death\"?",
          "choicesOrder": "random",
          "choices": [
            "John Hancock",
            "James Madison",
            "Patrick Henry",
            "Samuel Adams"
          ],
          "correctAnswer": "Patrick Henry"
        }
      ]
    },
    {
      "elements": [
        {
          "type": "radiogroup",
          "name": "magnacarta",
          "title": "What is Magna Carta?",
          "choicesOrder": "random",
          "choices": [
            "The foundation of the British parliamentary system",
            "The Great Seal of the monarchs of England",
            "The French Declaration of the Rights of Man",
            "The charter signed by the Pilgrims on the Mayflower"
          ],
          "correctAnswer": "The foundation of the British parliamentary system"
        }
      ]
    }
  ],
  "completedHtml": "<h4>You got <b>{correctAnswers}</b> out of <b>{questionCount}</b> correct answers.</h4>",
  "completedHtmlOnCondition": [
    {
      "expression": "{correctAnswers} == 0",
      "html": "<h4>Unfortunately, none of your answers is correct. Please try again.</h4>"
    },
    {
      "expression": "{correctAnswers} == {questionCount}",
      "html": "<h4>Congratulations! You answered all the questions correctly!</h4>"
    }
  ]
};
```

### `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/automatically-move-to-next-page-if-answer-selected/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/automatically-move-to-next-page-if-answer-selected/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/automatically-move-to-next-page-if-answer-selected/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/automatically-move-to-next-page-if-answer-selected/vanillajs.md)