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