How to reset / clear a survey so it can be taken multiple times?

Are you requesting a feature, reporting a bug or asking a question?

Asking a Question

I’m just wondering how to reset a survey once it’s done. I’m using the react version (1.1.12). I have a survey that I want to use multiple times on a single page. I just need to know how to reset the form.

What is the current behavior?

When the form is completed, it shows the completion html (or nothing, if I specify showCompletedPage={false}).

What is the expected behavior?

My desired behavior is that once the user completes a survey, the survey resets to its original blank state and the user can fill it out again.

P.S. Thanks for building survey.js, it’s really nice. I especially like the survey creator website. All around well done!

[Aaronik]

I’d like to bump this, it’s still causing issues for me and my product. How can I clear the survey in React?

[Aaronik]

Does that survey variable come from a React ref?

When I use a react ref, the render() function does work (The survey is coming back, yay!), but clear() is having no effect (The values are all still present in the survey fields).

Here is my code:

import React from 'react'
import { Survey as SurveyReact } from 'survey-react'
import Container from 'react-bootstrap/Container'

type TProps<TSurveyResult> = { 
  json: Object
  onComplete: (json: TSurveyResult) => void
}

export default class Survey<TSurveyResult> extends React.Component<TProps<TSurveyResult>, {}> {
  private survey = React.createRef<SurveyReact>()

  private onComplete = (resp: { data: TSurveyResult }) => {
    const surveyJson = resp.data

    // Property 'survey' is protected and only accessible
    // within class 'Survey' and its subclasses.
    // However, this is how you access survey, as per
    // https://github.com/surveyjs/survey-library/issues/1855.
    // @ts-ignore
    this.survey.current.survey.clear()
    // @ts-ignore
    this.survey.current.survey.render()

    this.props.onComplete(surveyJson)
  }

  render() {
    return (
      <Container>
        <SurveyReact
          ref={this.survey}
          showCompletedPage={false}
          json={this.props.json}
          onComplete={this.onComplete}
        />
      </Container>
    )   
  }
}