英文:
short form with switching tabs
问题
我只会提供代码的翻译部分：
我只是尝试编写一个简单的表单，用于在选项卡之间切换。目前我只在进行功能部分，没有进行数据收集，但我遇到了一个问题。我试图让下一个按钮跳转到下一个选项卡，似乎可以工作，但然后立即切回到第一个选项卡。有点困惑。以下是我目前的代码。有什么想法？
// 你的HTML和JavaScript代码
请注意，我只提供了代码的翻译，没有包括问题的回答。
英文:
I'm just trying to write a simple form that switches between tabs. I'm just doing the functionality part without the data collecting right now, but I hit a snag. I'm trying to have the next button go to the next tab, and it seems to work, but then it switches right back to the first tab immediately. At a bit of a loss. Below is what I have atm. Any thoughts?
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
.tab {display: none }
#submit {display: none}
</style>
<body>
<form>
<div class="tab">
<input type="text" placeholder="Full Name" id="fname" name="fname"><br><br>
<input type="text" placeholder="Email" id="femail" name="femail">
</div>
<div class="tab">
<input type="text" placeholder="Date of Birth" id="fdob" name="fdob"><br><br>
<input type="text" placeholder="Phone Number" id="fnumber" name="fnumber">
</div>
<div class="tab">
<input type="text" placeholder="Address" id="faddress" name="faddress"><br><br>
<input type="text" placeholder="ZIP Code" id="fzip" name="fzip">
</div><br><br>
<button id="previous">Previous</button><button id="next" onclick="nextTab(currentTab)">Next</button><br><br>
<input type="button" id ="submit" value="Submit">
</form>
<script>
let currentTab = 0;
let x = document.getElementsByClassName("tab");
x[currentTab].style.display="inline";
if (currentTab == 0) {
document.getElementById("previous").style.display = "none";
};
function nextTab(f) {
x[f].style.display = "none";
let a = currentTab += 1;
x[a].style.display = "inline";
currentTab = a;
}
</script>
</body>
</html>
I tried to set the currentTab variable in the nextTab function to, but it still goes right to the first tab. I'm probably missing a detail that's stopping me from getting this to work.
答案1
得分: 1
你的主要问题是你没有将*type="button"*添加到按钮中，因为按钮默认为type="submit"，这会在每次单击“下一步”或“上一步”按钮时提交表单。
我最初发现这一点时，我已经重新编写了大部分JS以检查其中的错误，因此这里对JS部分采取了略微不同的方式，但不是必要的 - 最重要的是将按钮设置为type="button"。
英文:
Your main problem is that you did not add type="button" to your buttons, since buttons default to be type="submit" this submits your form each time you click a Next or Previous button.
I first discovered this when I had already rewritten much of the JS to check for errors in it, so here a slighlty different take on the JS part, but not necessary - most important is set your buttons to type="button":
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
.tab {
display: none
}
#submit {
display: none
}
</style>
<body>
<form>
<div class="tab">
<input type="text" placeholder="Full Name" id="fname" name="fname"><br><br>
<input type="text" placeholder="Email" id="femail" name="femail">
</div>
<div class="tab">
<input type="text" placeholder="Date of Birth" id="fdob" name="fdob"><br><br>
<input type="text" placeholder="Phone Number" id="fnumber" name="fnumber">
</div>
<div class="tab">
<input type="text" placeholder="Address" id="faddress" name="faddress"><br><br>
<input type="text" placeholder="ZIP Code" id="fzip" name="fzip">
</div><br><br>
<button type="button" id="previous">Previous</button>
<button type="button" id="next">Next</button><br><br>
<input type="button" id="submit" value="Submit">
</form>
<script>
let currentTab = 0;
document.querySelector('.tab:nth-child(1)').style.display = 'inline';
document.body.addEventListener('click', e => {
// check if click on next or previous btn, if not return
let nextBtn = e.target.closest('#next');
let prevBtn = e.target.closest('#previous');
if (!nextBtn && !prevBtn) { return; }
// get all tabs and hide them
let tabs = [...document.querySelectorAll('.tab')];
tabs.forEach(tab => tab.style.display = '');
// calculate current tab
currentTab += (nextBtn && 1) + (prevBtn && -1);
if (currentTab >= tabs.length) { currentTab = 0; }
if (currentTab < 0) { currentTab = tabs.length - 1; }
// show current tab
tabs[currentTab].style.display = 'inline';
});
</script>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论