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 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"
});
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
}]
}
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()"
}]
}