surveyJS
/Demos
Demo Basic Extended
HTML
<div class="surveyjs-wrapper card panel-primary mb-4 pt-2" data-surveyjs-wrapper>
<div class="card-header no-bg">
<div class="card-header-inner">
<h3 class="surveyjs-title panel-title text-green mt-0">My Survey</h3>
<p class="surveyjs-description">Answer the questions</p>
</div>
</div>
<div class="card-body">
<form action="../json/survey.json" name="surveyjs-form" class="surveyjs-form" data-surveyjs-form novalidate>
<div class="surveyjs-body questionsList clearfix" data-surveyjs-body></div>
<div class="surveyjs-footer">
<div class="surveyjs-question-wrapper text-right" data-formjs-question data-surveyjs-external="1">
<div class="surveyjs-answers-wrapper form-group">
<div class="text-left small" data-question></div>
<div class="radio form-check-inline" data-answer>
<input class="form-check-input" name="surveyjs-answer-external" data-exclude-storage data-field/>
<label class="form-check-label">
<span data-label></span>
</label>
</div>
<div class="radio form-check-inline" data-answer>
<input class="form-check-input" name="surveyjs-answer-external" data-exclude-storage data-field/>
<label class="form-check-label">
<span data-label></span>
</label>
</div>
<div class="surveyjs-errors-wrapper small">
To go on you must select an answer.
</div>
</div>
</div>
<div class="surveyjs-question-wrapper text-right" data-formjs-question>
<div class="surveyjs-answers-wrapper form-group">
<div class="text-left small">
You must accept this condition in order to enable the submit button.
</div>
<div class="radio form-check-inline">
<input class="form-check-input" type="radio" name="prova-00" id="radio-prova-00-a" value="yeee" required="" />
<label class="form-check-label" for="radio-prova-00-a">
<span>Yes</span>
</label>
</div>
<div class="radio form-check-inline">
<input class="form-check-input" type="radio" name="prova-00" id="radio-prova-00-b" value="" required="" />
<label class="form-check-label" for="radio-prova-00-b">
<span>No</span>
</label>
</div>
<div class="surveyjs-errors-wrapper small">
To go on you must select an answer.
</div>
</div>
</div>
<button class="btn btn-primary d-block mx-auto" disabled type="submit">SEND</button>
</div>
</form>
</div>
</div>
JS
// FULL CODE: /js/demos/demo-basic-extended.js
const $form = document.querySelector('[data-surveyjs-form]');
const options = {
url: '../json/survey.json',
cssClasses: {
select: 'custom-select'
},
formOptions: {
beforeSend: function(){...}
}
};
const onValidation = fields => {...};
$form.addEventListener('fjs.field:validation', event => {
onValidation([event.detail]);
});
$form.addEventListener('fjs.form:validation', event => {
onValidation(event.detail.fields);
});
$form.addEventListener('fjs.form:submit', event => {
event.detail
.then(ajaxData => {...})
.catch(error => {...})
.finally(() => {...});
});
$form.addEventListener('sjs:init', event => {
event.detail
.then(data => {...})
.catch(error => {...});
});
const mySurvey = new Survey( $form, options );
My Survey
Answer the questions