Work with survey data (properties, methods and events).
Open in new window
Text boxes are bind to survey values by using events.



Cars (use comma to separate values, do not type spaces):

//Use getValue to get the value of the question
//Use setValue to set the value of the question
survey.setValue('questionName', newValue);
//Use data property to get/set survey data as json = {"youquestion1": value1, "youquestionN":valueN};
//Use onValueChanged event to get a notification on chaning question value.
survey.onValueChanged.add(function (sender, options) {
    var mySurvey = sender;
    var questionName =;
    var newValue = options.value;
//Use onComplete to get to pass it to the server.
survey.onComplete.add(function (sender) {
    var mySurvey = sender;
    var surveyData =;

Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";

window.survey = new Survey.Model({ questions: [
    {type: "text", name: "name", title: "Your name:"},
    {type: "text", name: "email", title: "Your e-mail"},
    { type: "checkbox", name: "car", title: "What car are you driving?", isRequired: true, colCount: 4,
        choices: ["None", "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen"] }
survey.onComplete.add(function(result) {
	document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(;

var data = {name:"John Doe", email: "", car:["Ford"]};
var surveyValueChanged = function (sender, options) {
    var el = document.getElementById(;
    if(el) {
        el.value = options.value;

    model: survey,
    data: data,
    onValueChanged: surveyValueChanged

<!DOCTYPE html>

    <title>Welcome to JQuery</title>
    <script src=""></script>
    <script src=""></script>
    <link rel="stylesheet" href="">
    <link rel="stylesheet" href="./index.css">

    <div id="surveyElement"></div>
    <div id="surveyResult"></div>
    <script src="./index.js"></script>


.btn-green {
  background-color: #1ab394;
  color: #fff;
  border-radius: 3px;

.btn-green:hover, .btn-green:focus {
    background-color: #18a689;
    color: #fff;

.panel-footer {
    text-align: right;
    background-color: #fff;