多页表格不会超过第一部分

Question

我希望有人可以帮助我解决我从 https://www.w3schools.com/howto/howto_js_form_steps.asp 改用的代码。单击我的下一个按钮时，它会短暂移动到表单的下一部分，但随后又返回。 js控制台是空的，所以我不知道我的错误在哪里。提前感谢您的学习帮助！

我的 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>

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

Answer 1

原因是你点击next页面就刷新了。

为避免这种情况，您需要使用event.preventDefault() 方法。这将阻止默认的onClick。

阅读更多关于preventDefaulthere

我已经编辑了你的代码，现在可以正常工作了。

工作演示： https://jsfiddle.net/usmanmunir/pLh9v05q/7/

在下面运行 sn-p 以查看它的工作情况。

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>