Cart Licenses Contact Support Online Creator Log in/Register
Try
Buy
v 1.9.50

Auto-Populate Form Fields


                        
        
            Survey.StylesManager.applyTheme("defaultV2");
        

const surveyValueChanged = function (sender, options) {
    const el = document.getElementById(options.name);
    if(el) {
        el.value = options.value;
    }
};

                
                    var json = {
  "elements": [
    {
      "type": "text",
      "name": "name",
      "title": "Name:",
      "readOnly": true
    },
    {
      "type": "text",
      "name": "email",
      "title": "Email:",
      "readOnly": true
    },
    {
      "type": "checkbox",
      "name": "car",
      "title": "Which car do you drive?",
      "isRequired": true,
      "colCount": 4,
      "hasNone": true,
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ]
    }
  ],
  "showQuestionNumbers": "off"
};

                    window.survey = new Survey.Model(json);
                
        
            survey.onComplete.add(function(sender) {
            document.querySelector('#surveyResult').textContent =
            "Result JSON:\n" + JSON.stringify(sender.data, null, 3);
            });
        
survey.data = {name:'John Doe', email: 'johndoe@nobody.com'};
survey.onValueChanged.add(surveyValueChanged);
        
            var app = new Vue({
            el: '#surveyElement',
            data:
            {
            survey: survey
            }
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Auto-Populate Form Fields, Vue Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>
    <script src="/DevBuilds/survey-core/survey.core.min.js"></script>
    <script src="/DevBuilds/survey-core/survey.i18n.min.js"></script>
    <script src="/DevBuilds/survey-vue-ui/survey-vue-ui.min.js"></script>
    <link href="/DevBuilds/survey-core/defaultV2.min.css" type="text/css" rel="stylesheet" />
    <link rel="stylesheet" href="./index.css">

</head>
<body style="margin: 0">
    
            <div id="surveyElement" style="display:inline-block;width:100%;">
                <survey :survey='survey' />
            </div>
    <div id="surveyResult"></div>

<script type="text/javascript" src="./index.js"></script>

</body>
</html>

The auto-fill functionality allows you to auto-populate form fields of your surveys with previously entered data. This functionality is useful when part of survey information is already known. For example, Name and Email form fields can be filled automatically based on user login information.

To pre-populate 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. To manage the survey result data, assign a new object to the data property. You can define this object locally or load it from a web service. In this demo, the data object is used to pre-fill information in read-only form fields.

Note that a new data object replaces the old object and erases entered data if there was any. If you want to merge the new and old objects, call the mergeData(newDataObj) method.

If you want to pass values into individual form fields, call the setValue(questionName, newValue) method. Open the Settings panel and enter a value into one of the text boxes there. You will see this value copied into the corresponding question. This happens because the text boxes call the setValue method to auto-populate survey questions dynamically. A Survey instance also has the getValue(questionName) method that allows you to access individual form field values at runtime. Note that if you need to set more than one form field, replace the data object or call the mergeData(newDataObj) method to ensure optimal performance.

Settings

Enter a value into a text box below, and this value will be copied into a corresponding survey question.