Survey.js Full Example

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/survey-jquery/0.12.21/survey.jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<title>Welcome to the Survey</title>

<body>
    <div id="surveyElement" class="col-md-7"></div>
    <div id="surveyResult"></div>
    <script>
        window.onbeforeunload = function () {
            return "Do you really want to close?";
        };
    </script>
</body>

JavaScript

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

Survey.JsonObject.metaData.addProperty("text", {name: "renderAs", default: "standard", choices: ["standard", "percent-input-addon"]});

window.survey = new Survey.Model({ pages: [
    { questions: [
            { type: "text", name: "avgRecvSugarContent", isRequired: true, inputType: "number", title: "What was your average recoverable sugar content in 2017?", renderAs: "percent-input-addon", validators: [{ type: "regex", regex: "^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$", text: "Please enter a percentage from 1 to 100" }]}
    ]},
    { questions: [
        { type: "text", name: "avgRecvSugarContent", isRequired: true, inputType: "number", title: "What was your average recoverable sugar content in 2017?", renderAs: "percent-input-addon", validators: [{ type: "regex", regex: "^(\+\d{1,2}\s)?\(?\d{3}\)?[\s.-]?\d{3}[\s.-]?\d{4}$", text: "Please enter a percentage from 1 to 100" }]}
        ]}
]});

survey.showProgressBar = "bottom";

var percentInputWidget = {
    name: "percent-input-addon",
    htmlTemplate: "<div class='input-group'><input type='number' id='avgRecvSugarContent' min='1' class='form-control' aria-describedby='basic-addon2'><span class='input-group-addon'>%</span></div>",
    isFit : function(question) { return question["renderAs"] === 'percent-input-addon'; },
    afterRender: function(question, el) {
        var $el = $(el);
        $($el.find('input')).on('blur', function(event){
          question.value = event.target.value;
        });
    }
}

Survey.CustomWidgetCollection.Instance.addCustomWidget(percentInputWidget);
$("#surveyElement").Survey({
    model:survey
});