Documentation Docs
Documentation Docs

Populate Form Fields

SurveyJS Form Library allows you to control and populate form fields programmatically. This help topic describes how to set one or more question values in code and how to specify a default value for a survey question.

Single Question Value

You can set a question's value property directly to populate a form field. Call the Survey's getQuestionByName(questionName) method to obtain the question's instance and then set the value property of this instance:

import { Model } from "survey-core";

const surveyJson = {
  "elements": [{
    "name": "subscribed",
    "type": "boolean",
    "renderAs": "checkbox",
    "title": "I agree to receive weekly newsletters"
  }]
}

const survey = new Model(surveyJson);
const subscribedQuestion = survey.getQuestionByName("subscribed");
subscribedQuestion.value = true;

Alternatively, you can call the Survey's setValue(questionName, newValue) method:

import { Model } from "survey-core";

const surveyJson = {
  // ...
}

const survey = new Model(surveyJson);
survey.setValue("subscribed", false);

Multiple Question Values

To populate multiple form fields, use the data property of a Survey instance. This property contains survey result data as an object in which keys are question names and values are answers. You can assign a new object to the data property:

import { Model } from "survey-core";

const surveyJson = {
  "elements": [{
    "name": "firstName",
    "title": "First Name"
  }, {
    "name": "lastName",
    "title": "Last Name"
  }]
}

const survey = new Model(surveyJson);
survey.data = {
  "firstName": "John",
  "lastName": "Doe"
}

The code above replaces the old data object and erases entered data if there was any. If you want to merge the new and old objects, call the mergeData(newDataObj) method:

import { Model } from "survey-core";

const surveyJson = {
  // ...
}

const survey = new Model(surveyJson);
survey.mergeData({
  "lastName": "Doe"
});

Default Question Values

You can set a question's defaultValue. It will be used until a proper value is specified by a user or programmatically. If the proper value is never specified, defaultValue is saved in the survey results.

const surveyJson = {
  "elements": [{
    "name": "subscribed",
    "type": "checkbox",
    "title": "I agree to receive weekly newsletters",
    "defaultValue": true
  }]
}

See Also

Copyright © 2022 Devsoft Baltic OÜ. All rights reserved.

Why we use cookies.

This site uses cookies to make your browsing experience more convenient and personal. Cookies store useful information on your computer to help us improve the efficiency and relevance of our site for you. In some cases, they are essential to making the site work properly. By accessing this site, you consent to the use of cookies.

For more information, refer to DevSoft Baltic’ privacy policy and cookie policy.