v 1.9.6

Add a Survey to a jQuery Application

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

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

See the Pen SurveyJS - Add a Survey to a jQuery Application by RomanTsukanov (@romantsukanov) on CodePen.

You can find the full code in the following GitHub repository: Get Started with SurveyJS - jQuery.

Link SurveyJS Resources

The SurveyJS Library ships with a script and several style sheets that implement different themes. Insert links to the script and one of the style sheets within the <head> tag on your HTML page after the jQuery link:

<head>
    <!-- ... -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

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

    <!-- Bootstrap theme -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->

    <script type="text/javascript" src="https://unpkg.com/survey-jquery"></script>
    <!-- ... -->
</head>

To apply the linked theme, call the applyTheme(themeName) method. Its argument accepts different values depending on the chosen theme:

  • Modern theme
    "modern"

  • Bootstrap theme
    "bootstrap"

  • Default theme (in various color schemes)
    "default", "orange", "darkblue", "darkrose", "stone", "winter", "winterstone"

For instance, the following code applies the Modern theme:

Survey.StylesManager.applyTheme("modern");

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 definitions (JSON objects). For example, the following model definition 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 definition to the Survey.Model constructor as shown in the code below. The model instance will be later used to render the survey.

const survey = new Survey.Model(surveyJson);
View full code
<!DOCTYPE html>
<html>
<head>
    <title>My First Survey</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

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

    <!-- Bootstrap theme -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->

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

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

const survey = new Survey.Model(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, use the Survey() jQuery plugin as shown in the code below. Pass the model instance you created in the previous step to the model property of the plugin configuration object.

$(function() {
    $("#surveyContainer").Survey({ model: survey });
});

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://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

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

    <!-- Bootstrap theme -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->

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

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

const survey = new Survey.Model(surveyJson);

$(function() {
    $("#surveyContainer").Survey({ model: survey });
});

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. 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 Survey.Model(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 definition.

View full code
<!DOCTYPE html>
<html>
<head>
    <title>My First Survey</title>
    <meta charset="utf-8">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

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

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

    <!-- Bootstrap theme -->
    <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"> -->

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

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

const survey = new Survey.Model(surveyJson);

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

survey.onComplete.add(alertResults);

$(function() {
    $("#surveyContainer").Survey({ model: survey });
});

Conclusion

You have learnt how to add a survey to your jQuery application. For further information, refer to help topics within the Design a Survey section.