i have a form with 13 questions but i would like to put it inside a small div, so i can see first the question 1, with an right arrow go to question 2, then to question 3. With a left arrow go back to last question. I am new with this so i would appreciate your help. Thanks This is a piece of my form and my sad try Iam using back-1
back-2
to exchange background images
$(".right-arrow").on('click', () => { $("#interview-map").attr("hidden", "") $(".titulo").attr("hidden", "") $(".fuentestyle").removeAttr('hidden') $(".container").removeClass("back-1").addClass("back-2") })
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container back-1 py-3 h-100"> <div class="location-container col-12"> <label for="inputAddress2" class="titulo form-label">¿Whats your address? </label> <div id="interview-map" class="row"> <div class="locate"> <p>show my position</p> <input id="track" type="checkbox" /> </div> </div> <img class="right-arrow" src="assets/img/right_arrow.png" alt=""> </div> <div class="col-md-12"> <form id="form_interview" class="col-lg-12 row g-3 mx-10 my-10"> <div id="interview-address" class="fuentestyle col-12" hidden> <label for="referencia" class="form-label">Add your address: </label> <input type="text" class="form-control" id="referencia" placeholder="Reference"> </div> <div class="mb-3" hidden> <label for="disabledSelect" class="form-label">¿Question fuente?</label> <select id="fuente" class="form-select form-select-sm" aria-label=".form-select-sm example"> <option id="fuente-0" selected class="form-control"></option> <option id="fuente-1" value="1"></option> <option id="fuente-2" value="2"></option> <option id="fuente-3" value="3"></option> <option id="fuente-4" value="4"></option> </select> </div> <div class="mb-3" hidden> <label for="disabledSelect" class="form-label">Question construido</label> <select id="construido" class="form-select form-select-sm" aria-label=".form-select-sm example"> <option id="construido-0" selected class="form-control"></option> <option id="construido-1" value="1"></option> <option id="construido-2" value="2"></option> </select> </div> <div class="col-12" hidden> <label for="dias_agua" class="form-label">Question dias_agua </label> <input type="text" class="form-control" id="dias_agua" placeholder="Enter a number"> </div> <div class="col-12" hidden> <label for="horas_agua" class="form-label">Question horas_agua </label> <input type="text" class="form-control" id="horas_agua" placeholder="Enter a number to 24"> </div>
Personally I would try to make my application more data driven, but if you cannot change the form itself, then you could do something like this...
let index = 1; function back() { index--; update(); } function next() { index++; update(); } function update() { // Find all questions const questions = document.querySelectorAll("[id^='question-']"); // Hide all questions questions .forEach(question => { question.style.display = "none"; }); // Show the active question const activeQuestion = document.getElementById("question-" + index); if (activeQuestion != null) activeQuestion.style.display = "block"; // Hide/Show the buttons according to which question is being shown document.getElementById("back").style.display = index <= 1 ? "none" : "block"; document.getElementById("next").style.display = index >= questions.length ? "none" : "block"; } update();
<div id="question-1">Question 1</div> <div id="question-2">Question 2</div> <div id="question-3">Question 3</div> <div id="question-4">Question 4</div> <div id="question-5">Question 5</div> <button id="back" onclick="back()">Back</button> <button id="next" onclick="next()">Next</button>
Note:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.