javascript - 多页表格不会超过第一部分
问题描述
我希望有人可以帮助我解决我从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 & 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 & Wellbeing</h6>
<h2 class="dashhead-title">Physical Health & 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 & Wellbeing</h6>
<h2 class="dashhead-title">Mental & 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";
}
解决方案
原因是您单击下一步时页面会刷新。
为避免这种情况，您需要使用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 & 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 & Wellbeing</h6>
<h2 class="dashhead-title">Physical Health & 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 & Wellbeing</h6>
<h2 class="dashhead-title">Mental & 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>推荐阅读
- mongodb - 什么查询在 MongoDB 中使用更少的资源？
- python - 使用 Bash 添加到 Python 路径
- react-native - react-native-community/datetimepicker 没有设置它的所有值
- assembly - 导致表达式语法错误的 mov 指令
- python - Python sys.argv 接受 HTML 输入
- arrays - 递归爬升ArrayList
- ios - 当 TextEditor 失去焦点时如何得到通知？
- elasticsearch - 通过避免重复计算elasticsearch中的记录
- c# - C# - 向子进程发送输入 - 控制台应用程序
- python - Selenium：网站中的特定页面出现空白/白屏