Multi-page form won't advance past first section

Question

I'm hoping someone can help me troubleshoot my code, which I repurposed from https://www.w3schools.com/howto/howto_js_form_steps.asp. When clicking my next button, it briefly moves to the next section of the form, but then reverts back. The js console is empty, so I can't figure out where my error is. Thanks in advance for your learned assistance!

My HTML:


            
                
                    
                        Health & Wellbeing
                        Personal Growth
                    
                    
                        
                    
                
                
                    
                        Satisfaction
                        
                        5
                    
                    
                        Weight
                        
                        5
                    
                    
                        What Would A Ten Look Like?
                        
                    
                
            
            
                
                    
                        Health & Wellbeing
                        Physical Health & Fitness
                    
                    
                        
                    
                    
                    
                        
                            Satisfaction
                            
                            5
                        
                        
                            Weight
                            
                            5
                        
                        
                            What Would A Four Look Like?
                            
                        
                    
                
                
                    
                        
                            Health & Wellbeing
                            Mental & Emotional Health
                        
                        
                            
                        
                    
                    
                        
                            Satisfaction
                            
                            5
                        
                        
                            Weight
                            
                            5
                        
                        
                            What Would A Ten Look Like?

And Javascript:

    var currentTab = 0;
    showTab(currentTab);
    
    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:
        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("assessment-form").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";
    }

Always Helping · Accepted Answer

The reason is that the page refreshes as soon you click next.

To avoid that that you need to use event.preventDefault() method. This will preveent the default onClick.

Read more about preventDefault here

I have edited your code and its working fine now.

Working Demo: https://jsfiddle.net/usmanmunir/pLh9v05q/7/

Run snippet below to see it working.

var currentTab = 0;
showTab(currentTab);

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:
  fixStepIndicator(n)
}

function nextPrev(e, n) {
  e.preventDefault()
  // 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("assessment-form").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";
}

input.invalid {
  background-color: #ffdddd;
}


/* Hide all steps by default: */

.tab {
  display: none;
}

.step {
  height: 15px;
  width: 15px;
  margin: 0 2px;
  background-color: #bbbbbb;
  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: #4CAF50;
}


  
    
      
        Health & Wellbeing
        Personal Growth
      
      
        
      
    
    
      
        Satisfaction
        
        5
      
      
        Weight
        
        5
      
      
        What Would A Ten Look Like?
        
      
    
  
  
    
      
        Health & Wellbeing
        Physical Health & Fitness
      
      
        
      
    
    
      
        Satisfaction
        
        5
      
      
        Weight
        
        5
      
      
        What Would A Four Look Like?
        
      
    
  
  
    
      
        Health & Wellbeing
        Mental & Emotional Health
      
      
        
      
    
    
      
        Satisfaction
        
        5
      
      
        Weight
        
        5
      
      
        What Would A Ten Look Like?

Multi-page form won't advance past first section

Answers (1)

Related Questions

Multi-page form won&#39;t advance past first section

Answers (1)

Related Questions

Multi-page form won't advance past first section