Multi-page form won't advance past first section

1

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:

<form id="assessment-form">
            <fieldset class="tab">
                <div class="dashhead">
                    <div class="dashhead-titles">
                        <h6 class="dashhead-subtitle">Health &amp; Wellbeing</h6>
                        <h2 class="dashhead-title">Personal Growth</h2>
                    </div>
                    <div class="btn-toolbar dashhead-toolbar" >
                        <i class="fas fa-bars"></i>
                    </div>
                </div>
                <section>
                    <div class="form-inline mt-2">
                        <label for="health-personalGrowth-sat" class="mr-2">Satisfaction</label>
                        <input type="range"  class="form-control-range" id="health-personalGrowth-sat" min="0" max="10" value="5">
                        <label class="range-value col-form-label ml-2">5</label>
                    </div>
                    <div class="form-inline mt-2">
                        <label for="health-personalGrowth-sat" class="mr-2">Weight</label>
                        <input type="range"  class="form-control-range" id="health-personalGrowth-weight" min="0" max="10" value="5" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
                        <label class="range-value col-form-label ml-2">5</label>
                    </div>
                    <div class="mt-2">
                        <label for="health-personalGrowth-ten">What Would A Ten Look Like?</label>
                        <textarea class="form-control" id="health-personalGrowth-ten" rows="5"></textarea>
                    </div>
                </section>
            </fieldset>
            <fieldset class="tab">
                <div class="dashhead">
                    <div class="dashhead-titles">
                        <h6 class="dashhead-subtitle">Health &amp; Wellbeing</h6>
                        <h2 class="dashhead-title">Physical Health &amp; Fitness</h2>
                    </div>
                    <div class="btn-toolbar dashhead-toolbar" >
                        <i class="fas fa-bars"></i>
                    </div>
                    </div>
                    <section>
                        <div class="form-inline mt-2">
                            <label for="health-personalHealth-sat" class="mr-2">Satisfaction</label>
                            <input type="range"  class="form-control-range" id="health-personalHealth-sat" min="0" max="10" value="5">
                            <label class="range-value col-form-label ml-2">5</label>
                        </div>
                        <div class="form-inline mt-2">
                            <label for="health-personalHealth-sat" class="mr-2">Weight</label>
                            <input type="range"  class="form-control-range" id="health-personalHealth-weight" min="0" max="10" value="5" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
                            <label class="range-value col-form-label ml-2">5</label>
                        </div>
                        <div class="mt-2">
                            <label for="health-personalHealth-ten">What Would A Four Look Like?</label>
                            <textarea class="form-control" id="health-personalHealth-ten" rows="5"></textarea>
                        </div>
                    </section>
                </fieldset>
                <fieldset class="tab">
                    <div class="dashhead">
                        <div class="dashhead-titles">
                            <h6 class="dashhead-subtitle">Health &amp; Wellbeing</h6>
                            <h2 class="dashhead-title">Mental &amp; Emotional Health</h2>
                        </div>
                        <div class="btn-toolbar dashhead-toolbar" >
                            <i class="fas fa-bars"></i>
                        </div>
                    </div>
                    <section>
                        <div class="form-inline mt-2">
                            <label for="health-emotionalHealth-sat" class="mr-2">Satisfaction</label>
                            <input type="range"  class="form-control-range" id="health-emotionalHealth-sat" min="0" max="10" value="5">
                            <label class="range-value col-form-label ml-2">5</label>
                        </div>
                        <div class="form-inline mt-2">
                            <label for="health-emotionalHealth-sat" class="mr-2">Weight</label>
                            <input type="range"  class="form-control-range" id="health-emotionalHealth-weight" min="0" max="10" value="5" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
                            <label class="range-value col-form-label ml-2">5</label>
                        </div>
                        <div class="mt-2">
                            <label for="health-personalHealth-ten">What Would A Ten Look Like?</label>
                            <textarea class="form-control" id="health-emotionalHealth-ten" rows="5"></textarea>
                        </div>
                    </section>
                </fieldset>
                <div >
                    <button id="prevBtn" class="btn btn-outline-primary px-3 mt-2" onclick="nextPrev(-1)">Previous</button>
                    <button id="nextBtn" class="btn btn-outline-primary px-3 mt-2" onclick="nextPrev(1)">Next</button>
                </div>
                <div >
                    <span class="step"></span>
                    <span class="step"></span>
                    <span class="step"></span>
                </div>
        </form>

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";
    }

answered question

1 Answer

2

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;
}
<form id="assessment-form">
  <fieldset class="tab">
    <div class="dashhead">
      <div class="dashhead-titles">
        <h6 class="dashhead-subtitle">Health &amp; Wellbeing</h6>
        <h2 class="dashhead-title">Personal Growth</h2>
      </div>
      <div class="btn-toolbar dashhead-toolbar" style="font-size: 18px; color:#999999">
        <i class="fas fa-bars"></i>
      </div>
    </div>
    <section>
      <div class="form-inline mt-2">
        <label for="health-personalGrowth-sat" class="mr-2">Satisfaction</label>
        <input type="range" style="width: 80%; float:right" class="form-control-range" id="health-personalGrowth-sat" min="0" max="10" value="5">
        <label class="range-value col-form-label ml-2">5</label>
      </div>
      <div class="form-inline mt-2">
        <label for="health-personalGrowth-sat" class="mr-2">Weight</label>
        <input type="range" style="width: 80%; float:right" class="form-control-range" id="health-personalGrowth-weight" min="0" max="10" value="5" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
        <label class="range-value col-form-label ml-2">5</label>
      </div>
      <div class="mt-2">
        <label for="health-personalGrowth-ten">What Would A Ten Look Like?</label>
        <textarea class="form-control" id="health-personalGrowth-ten" rows="5"></textarea>
      </div>
    </section>
  </fieldset>
  <fieldset class="tab">
    <div class="dashhead">
      <div class="dashhead-titles">
        <h6 class="dashhead-subtitle">Health &amp; Wellbeing</h6>
        <h2 class="dashhead-title">Physical Health &amp; Fitness</h2>
      </div>
      <div class="btn-toolbar dashhead-toolbar" style="font-size: 18px; color:#999999">
        <i class="fas fa-bars"></i>
      </div>
    </div>
    <section>
      <div class="form-inline mt-2">
        <label for="health-personalHealth-sat" class="mr-2">Satisfaction</label>
        <input type="range" style="width: 80%; float:right" class="form-control-range" id="health-personalHealth-sat" min="0" max="10" value="5">
        <label class="range-value col-form-label ml-2">5</label>
      </div>
      <div class="form-inline mt-2">
        <label for="health-personalHealth-sat" class="mr-2">Weight</label>
        <input type="range" style="width: 80%; float:right" class="form-control-range" id="health-personalHealth-weight" min="0" max="10" value="5" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
        <label class="range-value col-form-label ml-2">5</label>
      </div>
      <div class="mt-2">
        <label for="health-personalHealth-ten">What Would A Four Look Like?</label>
        <textarea class="form-control" id="health-personalHealth-ten" rows="5"></textarea>
      </div>
    </section>
  </fieldset>
  <fieldset class="tab">
    <div class="dashhead">
      <div class="dashhead-titles">
        <h6 class="dashhead-subtitle">Health &amp; Wellbeing</h6>
        <h2 class="dashhead-title">Mental &amp; Emotional Health</h2>
      </div>
      <div class="btn-toolbar dashhead-toolbar" style="font-size: 18px; color:#999999">
        <i class="fas fa-bars"></i>
      </div>
    </div>
    <section>
      <div class="form-inline mt-2">
        <label for="health-emotionalHealth-sat" class="mr-2">Satisfaction</label>
        <input type="range" style="width: 80%; float:right" class="form-control-range" id="health-emotionalHealth-sat" min="0" max="10" value="5">
        <label class="range-value col-form-label ml-2">5</label>
      </div>
      <div class="form-inline mt-2">
        <label for="health-emotionalHealth-sat" class="mr-2">Weight</label>
        <input type="range" style="width: 80%; float:right" class="form-control-range" id="health-emotionalHealth-weight" min="0" max="10" value="5" tabindex="0" data-toggle="tooltip" title="Disabled tooltip">
        <label class="range-value col-form-label ml-2">5</label>
      </div>
      <div class="mt-2">
        <label for="health-personalHealth-ten">What Would A Ten Look Like?</label>
        <textarea class="form-control" id="health-emotionalHealth-ten" rows="5"></textarea>
      </div>
    </section>
  </fieldset>
  <div style="overflow:auto; float:right">
    <button id="prevBtn" class="btn btn-outline-primary px-3 mt-2" onclick="nextPrev(event, -1)">Previous</button>
    <button id="nextBtn" class="btn btn-outline-primary px-3 mt-2" onclick="nextPrev(event,1)">Next</button>
  </div>
  <div style="text-align:center;margin-top:40px;">
    <span class="step"></span>
    <span class="step"></span>
    <span class="step"></span>
  </div>
</form>

posted this

Have an answer?

JD

Please login first before posting an answer.