Documentation Docs
Documentation Docs

Add a Survey to a Knockout Application

This step-by-step tutorial will help you get started with the SurveyJS Form Library in a Knockout application. To add a survey to your Knockout application, follow the steps below:

As a result, you will create a survey displayed below:

See the Pen SurveyJS - Add a Survey to a Knockout Application.

View Full Code on GitHub

The SurveyJS Form Library for Knockout consists of two parts: survey-core (platform-independent code) and survey-knockout-ui (view models). Each part includes scripts and style sheets that implement the Modern and Default V2 themes illustrated below:

Themes in SurveyJS Form Library

Insert links to the scripts and style sheets within the <head> tag on your HTML page after the Knockout link:

<head>
    <!-- ... -->
    <script type="text/javascript" src="https://unpkg.com/knockout/build/output/knockout-latest.js"></script>

    <!-- Default V2 theme -->
    <link href="https://unpkg.com/survey-jquery/defaultV2.min.css" type="text/css" rel="stylesheet">

    <!-- Modern theme -->
    <!-- <link href="https://unpkg.com/survey-jquery/modern.min.css" type="text/css" rel="stylesheet"> -->

    <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
    <!-- ... -->
</head>

To apply the linked theme, call the applyTheme(themeName) method. Depending on the theme, pass "modern" or "defaultV2" as the method's argument. For instance, the following code applies the Default V2 theme:

Survey.StylesManager.applyTheme("defaultV2");

Create a Model

A model describes the layout and contents of your survey. The simplest survey model contains one or several questions without layout modifications.

Models are specified by model schemas (JSON objects). For example, the following model schema declares two textual questions, each with a title and a name. Titles are displayed on screen. Names are used to identify the questions in code.

const surveyJson = {
    elements: [{
        name: "FirstName",
        title: "Enter your first name:",
        type: "text"
    }, {
        name: "LastName",
        title: "Enter your last name:",
        type: "text"
    }]
};

To instantiate a model, pass the model schema to the SurveyKnockout.Survey constructor as shown in the code below. The model instance will be later used to render the survey.

const survey = new SurveyKnockout.Survey(surveyJson);
View Full Code
<!DOCTYPE html>
<html>
<head>
    <title>My First Survey</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://unpkg.com/knockout/build/output/knockout-latest.js"></script>

    <!-- Default V2 theme -->
    <link href="https://unpkg.com/survey-jquery/defaultV2.min.css" type="text/css" rel="stylesheet">

    <!-- Modern theme -->
    <!-- <link href="https://unpkg.com/survey-jquery/modern.min.css" type="text/css" rel="stylesheet"> -->

    <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>
Survey
    .StylesManager
    .applyTheme("defaultV2");

const surveyJson = {
    elements: [{
        name: "FirstName",
        title: "Enter your first name:",
        type: "text"
    }, {
        name: "LastName",
        title: "Enter your last name:",
        type: "text"
    }]
};

const survey = new SurveyKnockout.Survey(surveyJson);

Render the Survey

A survey should be rendered in a page element. Add this element to your page:

<body>
    <div id="surveyContainer"></div>
</body>

To render a survey in the page element, call the render(containerId) method on the model instance you created in the previous step:

document.addEventListener("DOMContentLoaded", function() {
    survey.render("surveyContainer");
});

If you replicate the code correctly, you should see the following survey:

Get Started with SurveyJS - Primitive Survey

View Full Code
<!DOCTYPE html>
<html>
<head>
    <title>My First Survey</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://unpkg.com/knockout/build/output/knockout-latest.js"></script>

    <!-- Default V2 theme -->
    <link href="https://unpkg.com/survey-jquery/defaultV2.min.css" type="text/css" rel="stylesheet">

    <!-- Modern theme -->
    <!-- <link href="https://unpkg.com/survey-jquery/modern.min.css" type="text/css" rel="stylesheet"> -->

    <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <div id="surveyContainer"></div>
</body>
</html>
Survey
    .StylesManager
    .applyTheme("defaultV2");

const surveyJson = {
    elements: [{
        name: "FirstName",
        title: "Enter your first name:",
        type: "text"
    }, {
        name: "LastName",
        title: "Enter your last name:",
        type: "text"
    }]
};

const survey = new SurveyKnockout.Survey(surveyJson);

document.addEventListener("DOMContentLoaded", function() {
    survey.render("surveyContainer");
});

Handle Survey Completion

After a respondent completes a survey, the results are available within the onComplete event handler. In real-world applications, you should send the results to a server where they will be stored in a database and processed:

const SURVEY_ID = 1;

function surveyComplete (sender) {
    saveSurveyResults(
        "https://your-web-service.com/" + SURVEY_ID,
        sender.data
    )
}

function saveSurveyResults(url, json) {
    const request = new XMLHttpRequest();
    request.open('POST', url);
    request.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    request.addEventListener('load', () => {
        // Handle "load"
    });
    request.addEventListener('error', () => {
        // Handle "error"
    });
    request.send(JSON.stringify(json));
}

const survey = new SurveyKnockout.Survey(surveyJson);

survey.onComplete.add(surveyComplete);

In this tutorial, the results are simply output in an alert dialog:

function alertResults (sender) {
    const results = JSON.stringify(sender.data);
    alert(results);
}

const survey = new SurveyKnockout.Survey(surveyJson);

survey.onComplete.add(alertResults);

Get Started with SurveyJS - Survey Results

As you can see, survey results are saved in a JSON object. Its properties correspond to the name property values of your questions in the model schema.

View Full Code
<!DOCTYPE html>
<html>
<head>
    <title>My First Survey</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://unpkg.com/knockout/build/output/knockout-latest.js"></script>

    <!-- Default V2 theme -->
    <link href="https://unpkg.com/survey-jquery/defaultV2.min.css" type="text/css" rel="stylesheet">

    <!-- Modern theme -->
    <!-- <link href="https://unpkg.com/survey-jquery/modern.min.css" type="text/css" rel="stylesheet"> -->
    
    <script type="text/javascript" src="https://unpkg.com/survey-core/survey.core.min.js"></script>
    <script type="text/javascript" src="https://unpkg.com/survey-knockout-ui/survey-knockout-ui.min.js"></script>
    <script type="text/javascript" src="index.js"></script>
</head>
<body>
    <div id="surveyContainer"></div>
</body>
</html>
Survey
    .StylesManager
    .applyTheme("defaultV2");

const surveyJson = {
    elements: [{
        name: "FirstName",
        title: "Enter your first name:",
        type: "text"
    }, {
        name: "LastName",
        title: "Enter your last name:",
        type: "text"
    }]
};

const survey = new SurveyKnockout.Survey(surveyJson);

function alertResults (sender) {
    const results = JSON.stringify(sender.data);
    alert(results);
}

survey.onComplete.add(alertResults);

document.addEventListener("DOMContentLoaded", function() {
    survey.render("surveyContainer");
});

View Full Code on GitHub

Further Reading

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