How to create tab buttons that links to its respective tab when creating a form in HTML

Question

I am creating a form in HTML that will have multiple tabs. I have a previous and next button to go through all the tabs as if they were pages. I also have circles at the bottom of the tab to inform the user what tab they are actively on and which tabs are next and which tabs were before. I would like each tab to be a link that when the user clicks on it will link them to it's respective tab. For example if I click on the tab circle labeled A it will bring me to the A tab. I tried using and internal link with anchor tags but that did not seem to work. Any idea? Thank you.

 //Form Tabs
      var currentTab = 0; // Current tab is set to be the first tab (0)
      showTab(currentTab); // Display the current tab

      function showTab(n) {
        // This function will display the specified tab of the form ...
        var x = document.getElementsByClassName("tab");
        x[n].style.display = "block";

        // ... and fix the Previous/Next buttons:
      /*  if (n == 0) {
          document.getElementById("prevBtn").style.display = "none";
        } else {
          document.getElementById("prevBtn").style.display = "inline";
        }
        if (n == (x.length - 1)) {
          document.getElementById("nextBtn").innerHTML = "Submit";
        } else {
          document.getElementById("nextBtn").innerHTML = "Next";
        }*/
        // ... and run a function that displays the correct step indicator:

        //Form 1 displays only Next button, Previous button is disabled.
        if (n == 0) {
           document.getElementById("prevBtn").style.display = "none";
         } else {
           document.getElementById("prevBtn").style.display = "inline";
         }
         //Form 5 displays only Previous button, Next button is disabled.
         if (n == 1) {
            document.getElementById("nextBtn").style.display = "none";
          } else {
            document.getElementById("nextBtn").style.display = "inline";
          }
        fixStepIndicator(n)
          }

      function nextPrev(n) {
        // This function will figure out which tab to display
        var x = document.getElementsByClassName("tab");
        // Exit the function if any field in the current tab is invalid:
        if (n == 1 && !validateForm()) return false;
        // Hide the current tab:
        x[currentTab].style.display = "none";
        // Increase or decrease the current tab by 1:
        currentTab = currentTab + n;
        // if you have reached the end of the form... :
        if (currentTab >= x.length) {
          //...the form gets submitted:
          document.getElementById("regForm").submit();
          return false;
        }
        // Otherwise, display the correct tab:
        showTab(currentTab);
      }

      function validateForm() {
        // This function deals with validation of the form fields
        var x, y, i, valid = true;
        x = document.getElementsByClassName("tab");
        y = x[currentTab].getElementsByTagName("input");
        // A loop that checks every input field in the current tab:
        for (i = 0; i < y.length; i++) {
          // If a field is empty...
          if (y[i].value == "") {
            // add an "invalid" class to the field:
            y[i].className += " invalid";
            // and set the current valid status to false:
            valid = false;
          }
        }
        // If the valid status is true, mark the step as finished and valid:
        if (valid) {
          document.getElementsByClassName("step")[currentTab].className += " finish";
        }
        return valid; // return the valid status
      }

      function fixStepIndicator(n) {
        // This function removes the "active" class of all steps...
        var i, x = document.getElementsByClassName("step");
        for (i = 0; i < x.length; i++) {
          x[i].className = x[i].className.replace(" active", "");
        }
        //... and adds the "active" class to the current step:
        x[n].className += " active";
      }

   /* Style for Select */
            /* Style the form */
            #regForm {
              background-color: #e9e9e9;
              margin: 20px auto;
              width: 70%;
              min-width: 300px;
            }
    /* Make circles that indicate the steps of the form: */
            .step {
              height: 15px;
              width: 15px;
              margin: 0 2px;
              background-color: #b8cce4;
              border: none;
              border-radius: 50%;
              display: inline-block;
              opacity: 0.5;
            }

            /* Mark the active step: */
            .step.active {
              opacity: 1;
            }

            /* Mark the steps that are finished and valid: */
            .step.finish {
              background-color: #b8cce4;
            }

            /*Used for blue background headings */
            tr.blueHead {
              background-color: #b8cce4;
            }

How to create tab buttons that links to its respective tab when creating a form in HTML

Answers (1)

Related Questions