Le formulaire de plusieurs pages ne passera pas au-delà de la première section

2020-06-30 javascript jquery forms wizard

J'espère que quelqu'un pourra m'aider à dépanner mon code, que j'ai réutilisé à partir de https://www.w3schools.com/howto/howto_js_form_steps.asp . Lorsque vous cliquez sur mon bouton suivant, il passe brièvement à la section suivante du formulaire, puis revient en arrière. La console js est vide, donc je ne peux pas comprendre où est mon erreur. Merci d'avance pour votre aide précieuse!

Mon 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" 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(-1)">Previous</button>
                    <button id="nextBtn" class="btn btn-outline-primary px-3 mt-2" onclick="nextPrev(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>

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

Answers

La raison en est que la page est actualisée dès que vous cliquez sur Suivant.

Pour éviter cela, vous devez utiliser la méthode event.preventDefault() . Cela empêchera le onClick par défaut.

En savoir plus sur preventDefault ici

J'ai édité votre code et son bon fonctionnement maintenant.

Démonstration de travail: https://jsfiddle.net/usmanmunir/pLh9v05q/7/

Exécutez l'extrait ci-dessous pour le voir fonctionner.

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>

Related