Bonjour à tous,
J'ai un petit soucis je suis en cours de création d'un formulaire et je n'arrive pas a faire deux choses... J'ai regardé ce qu'on pouvait faire sur internet (tutos + documentations + forum) afin de comprendre et faire par moi même mais rien n'y fait.
Alors est-ce qu'une personne pourrait m'aider ?
Je vous explique mes 2 problèmes.
J'ai créer un questionnaire (qui fonctionne) mais :
1. Mon bouton "précédent" s'affiche dès la première question or je voudrais qu'il ne s'affiche qu'à partir de la question 2 afin de le faire revenir sur la question 1. Et qu'il ne soit jamais présent sur la question 1.
2. Mon bouton "suivant", reste affiché constamment, or je voudrais qu'il ne s'affiche que lorsqu'on a sélectionné une réponse.
Petite précision, mes données sont récupérer directement de ma BDD. Voici mon HTML/twig :
Voici mon JavaScript qui me permet d'affiché mes deux boutons.
Merci à vous
J'ai un petit soucis je suis en cours de création d'un formulaire et je n'arrive pas a faire deux choses... J'ai regardé ce qu'on pouvait faire sur internet (tutos + documentations + forum) afin de comprendre et faire par moi même mais rien n'y fait.
Alors est-ce qu'une personne pourrait m'aider ?
Je vous explique mes 2 problèmes.
J'ai créer un questionnaire (qui fonctionne) mais :
1. Mon bouton "précédent" s'affiche dès la première question or je voudrais qu'il ne s'affiche qu'à partir de la question 2 afin de le faire revenir sur la question 1. Et qu'il ne soit jamais présent sur la question 1.
2. Mon bouton "suivant", reste affiché constamment, or je voudrais qu'il ne s'affiche que lorsqu'on a sélectionné une réponse.
Petite précision, mes données sont récupérer directement de ma BDD. Voici mon HTML/twig :
<section class="container" >
<div id="block2" style="display:none" >
<div class="titre-page margin-top-30">
<h1 class="text-center">{{ qcm.title }}</h1>
<div class="separateur separateur-centre"></div>
</div>
<div class="row">
<div id="progressbar">
<div id="progress-label">0%</div>
</div>
<div class="col-12" >
<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
<form method="post">
{% for question in qcm.qcmQuestions %}
<div class="question question-{{ loop.index-1 }}">
<div class="row">
<div class="col-2 img_qcm">
<img src="{{ asset('img/tests/numeros/question-'~ loop.index ~'.png') }}" alt="" class="img-responsive">
</div>
<div class="col">
<div class="qcm-test">
<h2>{{ question.content|raw }}</h2>
</div>
</div>
</div>
<div class="col-6 reponses">
{% if question.type == constant('TYPE_RANGE', question) %}
<div class="btn-group" >
{% for answer in question.qcmAnswers %}
<label class="btn btn-primary bouton_qcm " >
<input type="radio" name="qcm-form[{{ question.id }}]" value="{{ answer.id }} ">
{{ answer.content }}
</label>
{% endfor %}
</div>
{% elseif question.type == constant('TYPE_RADIO', question) %}
{% for answer in question.qcmAnswers %}
<div class="form-check">
<label class="form-check-label">
<input class="form-check-input" type="radio" name="qcm-form[{{ question.id }}]" value="{{ answer.id }}">
{{ answer.content }}
<span class="circle">
<span class="check"></span>
</span>
</label>
</div>
<br>
{% endfor %}
{% endif %}
</div>
</div>
{% endfor %}
<span class="btn btn-primary" id="btn-previous" onclick="previous()" >Précédent</span>
<span class="btn btn-primary" id="btn-next" onclick="next()" >Suivant</span>
<span class="error" id="errorname"></span>
<input type="submit" class="btn btn-primary" id="btn-send" style="display: none;">
</form>
</div>
</div>
</div>
</div>
</section>Voici mon JavaScript qui me permet d'affiché mes deux boutons.
var currentStep = 0;
var elQuestions = document.querySelectorAll('.question');
var elBtnPrevious = document.querySelector('#btn-previous');
var elBtnNext = document.querySelector('#btn-next');
var elBtnSend = document.querySelector('#btn-send');
var elProgressBar = document.querySelector('#progress-label');
displayOrHideQuestions();
function previous() {
currentStep -= 1;
displayOrHideQuestions()
if (currentStep === elQuestions.length - 1) {
elBtnPrevious.style.display = "none";
}
var pourcentage = Math.round(currentStep * 100 / (elQuestions.length - 1));
elProgressBar.innerHTML = pourcentage + '%';
elProgressBar.style.width = pourcentage + '%';
}
function next() {
currentStep += 1;
displayOrHideQuestions()
if (currentStep === elQuestions.length - 1) {
elBtnNext.style.display = "none";
elBtnSend.style.display = "block";
}
var pourcentage = Math.round(currentStep * 100 / (elQuestions.length - 1));
elProgressBar.innerHTML = pourcentage + '%';
elProgressBar.style.width = pourcentage + '%';
}
function displayOrHideQuestions() {
for (var i = 0; i < elQuestions.length; i++) {
elQuestions[i].style.display = "none";
}
elQuestions[currentStep].style.display = "block";
}Merci à vous