我正在尝试创建一个多步骤使用HTML用户注册表单。 我已经添加了两个部分,现在当我从javascript引用next按钮时,它可以工作,但是在转换之后返回到第一页。
HTML代码:
<form>
<div class="page slidePage ">
<div class="field">
<div class="label">Username*</div>
<input type="text">
</div>
<div class="field">
<div class="label">Firstname*</div>
<input type="text">
</div>
<div class="field">
<div class="label">Lastname*</div>
<input type="text">
</div>
<div class="field">
<button class="nxt nextBtn-1">Next</button>
</div>
</div>
<div class="page">
<div class="field">
<div class="label">Email</div>
<input type="text">
</div>
<div class="field">
<div class="label">Password</div>
<input type="text">
</div>
<div class="field">
<div class="label">Password Confirmation</div>
<input type="text">
</div>
<div class="field buttons">
<button class="prev-1 prev">Previous</button>
<button class="submit">Next</button>
</div>
</div>
</form>
JavaScript:
const slidePage = document.querySelector(".slidePage");
const first_nextBtn = document.querySelector(".nextBtn-1");
const first_prevBtn = document.querySelector(".prev-1");
first_nextBtn.addEventListener("click", function(){
slidePage.style.marginLeft = "-25%";
});
first_prevBtn.addEventListener("click", function(){
slidePage.style.marginLeft = "[enter link description here][1]0%";
});
但这种情况正在发生:[1]:https://youtu.be/xstl6dpl42m
在表单中使用提交表单并重新加载页面
改用
可以使用“防止默认值”。 它将停止页面以便重新加载。
first_nextBtn.addEventListener("click", function(event){
event.preventDefault();
slidePage.style.marginLeft = "-25%";
});
表单刷新页面,您可以使用
<button type="button"></button>
或者使用Event.PreventDefault()