Cart Licenses Contact Support Online Creator Log in/Register
Try
Free
v 1.9.43

Custom Render of Survey Elements


                        
        
            Survey.StylesManager.applyTheme("bootstrap");
            Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
        

//Add a custom 'popupdescription' property to questions of all types and to pages
Survey.Serializer.addProperty("question", "popupdescription:text");
Survey.Serializer.addProperty("page", "popupdescription:text");
function showDescription(element) {
    document.getElementById("questionDescriptionText").innerHTML = element.popupdescription;
    $("#questionDescriptionPopup").modal();
}


                
                    var json = { 
    title: "Software developer survey.", 
    pages: [
      {
        "title": "What operating system do you use?",
        "popupdescription": "Select the operating system you are currently using.",
        "elements": [
          {
            "type": "checkbox",
            "name": "opSystem",
            "title": "OS",
            "hasOther": true,
            "isRequired": true,
            "popupdescription": "If you do not use any of the listed operating system, please select 'others' and type your operating system name.",
            "choices": [ "Windows", "Linux", "Macintosh OSX" ]
          }
        ]
      },
      {
        "title": "What language(s) are you currently using?",
        "popupdescription": "Select all programming languages you have been using for the last six months.",
        "elements": [
          {
            "type": "checkbox",
            "name": "langs",
            "title": "Please select from the list",
            "popupdescription": "Select all programming languages you have been using for the last six months.",
            "colCount": 4,
            "isRequired": true,
            "choices": [
              "Javascript",
              "Java",
              "Python",
              "CSS",
              "PHP",
              "Ruby",
              "C++",
              "C",
              "Shell",
              "C#",
              "Objective-C",
              "R",
              "VimL",
              "Go",
              "Perl",
              "CoffeeScript",
              "TeX",
              "Swift",
              "Scala",
              "Emacs Lisp",
              "Haskell",
              "Lua",
              "Clojure",
              "Matlab",
              "Arduino",
              "Makefile",
              "Groovy",
              "Puppet",
              "Rust",
              "PowerShell"
            ]
          }
        ]
      },
      {
        "title": "Please enter your name and e-mail",
        "popupdescription": "We will not share this information with any third-party organization.",
        "elements": [
          {
            "type": "text",
            "name": "name",
            "title": "Name:",
            "popupdescription": "Please, type your name as 'Given Name' 'Family Name'."
          },
          {
            "type": "text",
            "name": "email",
            "title": "Your e-mail",
            "popupdescription": "Please, make sure you do not misspell your e-mail."
          }
        ]
      }]
};

                    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.onAfterRenderQuestion.add(function(survey, options){
    //Do nothing if a question contains no description to show in a modal popup
    if(!options.question.popupdescription) return;
    //Create a 'More Info' button to invoke a modal popup
    var btn = document.createElement("button");
    btn.type = "button";
    btn.className = "btn btn-info btn-xs";
    btn.innerHTML = "More Info";
    var question = options.question;
    btn.onclick = function() { showDescription(question); }
    //Insert the created 'More Info' button into the rendered question's header
    var header = options.htmlElement.querySelector("h5");
    if(!header) header = options.htmlElement;
    var span = document.createElement("span");
    span.innerHTML = "  ";
    header.appendChild(span);
    header.appendChild(btn);
});

survey.onAfterRenderPage.add(function(survey, options){
    //Do nothing if a page contains no description to show in a modal popup
    if(!options.page.popupdescription) return;
    //Create a 'More Info' button to invoke a modal popup
    var btn = document.createElement("button");
    btn.type = "button";
    btn.className = "btn btn-info btn-xs";
    btn.innerHTML = "More Info";
    btn.onclick = function() { showDescription(survey.currentPage); }
    //Insert the created 'More Info' button into the rendered page's header
    var header = options.htmlElement.querySelector("h4");
    var span = document.createElement("span");
    span.innerHTML = "  ";
    header.appendChild(span);
    header.appendChild(btn);
});        
            $("#surveyElement").Survey({
            model: survey 
            });
        

                    
<!DOCTYPE html>
<html lang="en">
<head>
    <title>Custom Render of Survey Elements, jQuery Survey Library Example</title>
    
<meta name="viewport" content="width=device-width" />
    <script src="https://unpkg.com/jquery"></script>
    <script src="/DevBuilds/survey-jquery/survey.jquery.min.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./index.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body style="margin: 0">
    
<!-- Modal -->
<div id="questionDescriptionPopup" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <!-- An element that displays a survey element's 'popupdescription' property value-->
                <p><div id="questionDescriptionText"></div></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>            <div id="surveyElement" style="display:inline-block;width:100%;">
            </div>
    <div id="surveyResult"></div>

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

</body>
</html>

The Survey object (the SurveModel class) implements a set of after-render events allowing you to customize the appearance and functionality of survey elements.

API demonstrated in the example:

Related API:

Tell Us What You Think

Help us serve you better by taking this brief survey.
We are interested to learn more about your
experience of using our libraries.

We'd really appreciate your feedback.

Start the Survey

Approximate time to complete: 2 min.