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
• Multiple Question Values
• Default Question Values

You can set a question's value property directly to populate a form field. Call SurveyModel's getQuestionByName(questionName) method to obtain the question's instance and set the value property on this instance. Refer to the value property description to find information about value types for different question types.

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 SurveyModel's setValue(questionName, newValue) method:

import { Model } from "survey-core";

const surveyJson = {
  // ...
}

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

To populate multiple form fields, use the data property of a SurveyModel 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 default question values and entered data. 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"
});

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
  }]
}

You can also specify default values dynamically. Assign a logical expression to a question's defaultValueExpression property. This expression will be evaluated for the first time when the survey begins, and then re-evaluated again each time any question value changes.

const surveyJson = {
  "elements": [{
    "name": "start-date",
    "title": "Select a vacation start date",
    "type": "text",
    "inputType": "date",
    "defaultValueExpression": "today()"
  }]
}

View Demo

• Merge Question Values