How can i put a form inside a div and see question by questions-CodePudding

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>

CodePudding user response：

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 solution above uses native javascript (jQuery is not necessary).
This code could be written more efficiently, for example you don't really have to query for all questions on each update. Instead, you could do this once when the page is loaded.