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

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

原因是您单击下一步时页面会刷新。

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

在此处阅读有关preventDefault的更多信息

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

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

运行下面的代码片段以查看它的工作原理。

 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>