short form with switching tabs

May 6, 2023

I’m just trying to write a simple form that switches between tabs. I’m just doing the functionality part without the data collecting right now, but I hit a snag. I’m trying to have the next button go to the next tab, and it seems to work, but then it switches right back to the first tab immediately. At a bit of a loss. Below is what I have atm. Any thoughts?

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>

.tab {display: none }
#submit {display: none}

</style>
<body>

    <form>
        <div class="tab">
          <input type="text" placeholder="Full Name" id="fname" name="fname"><br><br>
              <input type="text" placeholder="Email" id="femail" name="femail">
        </div>
          <div class="tab">
          <input type="text" placeholder="Date of Birth" id="fdob" name="fdob"><br><br>
              <input type="text" placeholder="Phone Number" id="fnumber" name="fnumber">
        </div>
          <div class="tab">
          <input type="text" placeholder="Address" id="faddress" name="faddress"><br><br>
              <input type="text" placeholder="ZIP Code" id="fzip" name="fzip">
        </div><br><br>
      <button id="previous">Previous</button><button id="next" onclick="nextTab(currentTab)">Next</button><br><br>
      <input type="button" id ="submit" value="Submit">
        
      </form>

<script>

let currentTab = 0;
let x = document.getElementsByClassName("tab");

x[currentTab].style.display="inline";

if (currentTab == 0) {
  document.getElementById("previous").style.display = "none";
};

function nextTab(f) {
  
  x[f].style.display = "none";
  
  let a = currentTab += 1; 
  
  x[a].style.display = "inline";

  currentTab = a;
} 

</script>

</body>
</html>

I tried to set the currentTab variable in the nextTab function to, but it still goes right to the first tab. I’m probably missing a detail that’s stopping me from getting this to work.

>Solution :

Your main problem is that you did not add type="button" to your buttons, since buttons default to be type="submit" this submits your form each time you click a Next or Previous button.

I first discovered this when I had already rewritten much of the JS to check for errors in it, so here a slighlty different take on the JS part, but not necessary – most important is set your buttons to type="button":

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
  .tab {
    display: none
  }

  #submit {
    display: none
  }
</style>

<body>

  <form>
    <div class="tab">
      <input type="text" placeholder="Full Name" id="fname" name="fname"><br><br>
      <input type="text" placeholder="Email" id="femail" name="femail">
    </div>
    <div class="tab">
      <input type="text" placeholder="Date of Birth" id="fdob" name="fdob"><br><br>
      <input type="text" placeholder="Phone Number" id="fnumber" name="fnumber">
    </div>
    <div class="tab">
      <input type="text" placeholder="Address" id="faddress" name="faddress"><br><br>
      <input type="text" placeholder="ZIP Code" id="fzip" name="fzip">
    </div><br><br>
    <button type="button" id="previous">Previous</button>
    <button type="button" id="next">Next</button><br><br>
    <input type="button" id="submit" value="Submit">

  </form>

  <script>
    let currentTab = 0;
    document.querySelector('.tab:nth-child(1)').style.display = 'inline';

    document.body.addEventListener('click', e => {
      // check if click on next or previous btn, if not return
      let nextBtn = e.target.closest('#next');
      let prevBtn = e.target.closest('#previous');
      if (!nextBtn && !prevBtn) { return; }
      // get all tabs and hide them
      let tabs = [...document.querySelectorAll('.tab')];
      tabs.forEach(tab => tab.style.display = '');
      // calculate current tab
      currentTab += (nextBtn && 1) + (prevBtn && -1);
      if (currentTab >= tabs.length) { currentTab = 0; }
      if (currentTab < 0) { currentTab = tabs.length - 1; }
      // show current tab
      tabs[currentTab].style.display = 'inline';
    });

  </script>

</body>

</html>