Survey.js Fiddle

by eddie_d_2000

HTML

<script src="https://unpkg.com/jquery"></script>
<script src="https://surveyjs.azureedge.net/0.12.20/survey.jquery.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css">
<body>
    <div id="surveyElement"></div>
    <div id="surveyResult"></div>
</body>

CSS

.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;
}

JavaScript

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

Survey.JsonObject.metaData.addProperty("dropdown", {name: "renderAs", default: "standard", choices: ["standard", "select2tagbox", "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: "^100$|^[123456789][0-9]$|^[0-9]$",
        text: "Please enter a percentage from 1 to 100"
      }]
    }]
  }, {
    questions: [{
      name: "color",
      type: "text",
      inputType: "color",
      title: "Your favorite color:"
    }]
  }]
});
 
survey.onComplete.add(function(result) {
	document.querySelector('#surveyResult').innerHTML = "result: " + JSON.stringify(result.data);
});


var percentInputWidget = {
  name: "percent-input-addon",
  htmlTemplate: "<div class='input-group'><span class='input-group-addon'>Irrigation water volume:</span><input type='number' min='1' id='avgIrrigatedWater' class='form-control'><span class='input-group-addon'>acre-inches/acre</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);
survey.data = { countries: ["Andorra"] };


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