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

View Demo

See Also

Copyright © 2023 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.

Your renewal subscription expires soon.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.

Your renewal subscription has expired.

Since the license is perpetual, you will still have permanent access to the product versions released within the first 12 month of the original purchase date.

If you wish to continue receiving technical support from our Help Desk specialists and maintain access to the latest product updates, make sure to renew your subscription by clicking the "Renew" button below.