问题：
在预览页提交表单时，表单被提交，但在提交时表单消失
公羊嘉
下面是MultistepForm的代码。我已经实现了一个多步骤表单功能，所以这里一切都很好，只是问题是在这个表单中，我在最后一步有一个预览页面，所以当我点击提交按钮时，表单正在消失，按钮正在顶部移动。所以如果有人能帮我请。
html prettyprint-override"><form id="regForm" action="">
<h1>Register:</h1>
<!-- One "tab" for each step in the form: -->
<div class="tab">Name:
<p><input placeholder="First name..." oninput="this.className = ''" id="fname" name="fname"</p>
<p><input placeholder="Last name..." oninput="this.className = ''" id="lname" name="lname"</p>
</div>
<div class="tab">Contact Info:
<p><input placeholder="E-mail..." oninput="this.className = ''" id="email" name="email"></p>
<p><input placeholder="Phone..." oninput="this.className = ''" id="phone" name="phone"></p></div>
<div class="tab">Birthday:
<p><input placeholder="dd" oninput="this.className = ''" id="dd" name="dd"></p>
<p><input placeholder="mm" oninput="this.className = ''" id="nn" name="nn"></p>
<p><input placeholder="yyyy" oninput="this.className = ''" id="yyyy" name="yyyy"></p>
</div>
<div class="tab">Review:
<p><div id="review_fname" name="review_fname"></div></p>
<p><div id="review_lname" name="review_lname"></div></p>
<p><div id="review_email" name="review_email"></div></p>
<p><div id="review_phone" name="review_phone"></div></p>
<p><div id="review_dd" name="review_dd"></div></p>
<p><div id="review_nn" name="review_nn"></div></p>
<p><div id="review_yyyy" name="review_yyyy"></div></p>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
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 will display 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:
if(currentTab == x.length-2) {
document.getElementById("review_fname").innerHTML = document.getElementById("fname").value;
document.getElementById("review_lname").innerHTML = document.getElementById("lname").value;
document.getElementById("review_email").innerHTML = document.getElementById("email").value;
document.getElementById("review_phone").innerHTML = document.getElementById("phone").value;
document.getElementById("review_dd").innerHTML = document.getElementById("dd").value;
document.getElementById("review_nn").innerHTML = document.getElementById("nn").value;
document.getElementById("review_yyyy").innerHTML = document.getElementById("yyyy").value;
}
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").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 on the current step:
x[n].className += " active";
}
</script>
共有1个答案
阳长恨
尝试以下代码，您需要将display：none添加到除第一个选项卡之外的每个选项卡
<form id="regForm" action="">
<h1>Register:</h1>
<!-- One "tab" for each step in the form: -->
<div class="tab">Name:
<p><input placeholder="First name..." oninput="this.className = ''" id="fname" name="fname"</p>
<p><input placeholder="Last name..." oninput="this.className = ''" id="lname" name="lname"</p>
</div>
<div class="tab" style="display: none;">Contact Info:
<p><input placeholder="E-mail..." oninput="this.className = ''" id="email" name="email"></p>
<p><input placeholder="Phone..." oninput="this.className = ''" id="phone" name="phone"></p></div>
<div class="tab" style="display: none;">Birthday:
<p><input placeholder="dd" oninput="this.className = ''" id="dd" name="dd"></p>
<p><input placeholder="mm" oninput="this.className = ''" id="nn" name="nn"></p>
<p><input placeholder="yyyy" oninput="this.className = ''" id="yyyy" name="yyyy"></p>
</div>
<div class="tab" style="display: none;">Review:
<p><div id="review_fname" name="review_fname"></div></p>
<p><div id="review_lname" name="review_lname"></div></p>
<p><div id="review_email" name="review_email"></div></p>
<p><div id="review_phone" name="review_phone"></div></p>
<p><div id="review_dd" name="review_dd"></div></p>
<p><div id="review_nn" name="review_nn"></div></p>
<p><div id="review_yyyy" name="review_yyyy"></div></p>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div>
</form>
<script>
var currentTab = 0; // Current tab is set to be the first tab (0)
showTab(currentTab); // Display the current tab
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 will display 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:
if(currentTab == x.length-2) {
document.getElementById("review_fname").innerHTML = document.getElementById("fname").value;
document.getElementById("review_lname").innerHTML = document.getElementById("lname").value;
document.getElementById("review_email").innerHTML = document.getElementById("email").value;
document.getElementById("review_phone").innerHTML = document.getElementById("phone").value;
document.getElementById("review_dd").innerHTML = document.getElementById("dd").value;
document.getElementById("review_nn").innerHTML = document.getElementById("nn").value;
document.getElementById("review_yyyy").innerHTML = document.getElementById("yyyy").value;
}
currentTab = currentTab + n;
// if you have reached the end of the form...
if (currentTab >= x.length) {
// ... the form gets submitted:
document.getElementById("regForm").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 on the current step:
x[n].className += " active";
}
</script>
类似资料：
-
我在一个基于Spring的Web应用程序（版本4.1.6。RELEASE，Spring Security 4.0.0。RELEASE）中工作，我收到错误（POST方法）。根据Spring的留档“Spring Security自动为任何
-
获取Form变量 通过Action的如下方法可以获取变量： GetSlice GetString GetInt GetBool GetFloat GetFile GetForm 自动映射 通常我们通过http.Request.Form来获得从用户中请求到服务器端的数据，这些数据一般都是采用name，value的形式提交的。xweb默认支持自动将这些变量映射到Action的成员中，并且这种映射支持子
-
Framework7 可以通过ajax自动提交 有两种自动提交方式: 当用户提交了表单 (点击了提交按钮) 或者当通过代码触发了 "submit" 事件 当用户更改了表单的内容，或者当通过代码触发了 "change" 事件 submit时提交表单数据 只需要添加 "ajax-submit" class 在form上，当submit时就会自动通过ajax发送表单数据 <form action="se
-
大家要切记这一点： 在任何 Single Page App中，js代码都不会产生 一个传统意义的form表单提交！（这会引起整个页面的刷新） 所以，我们往往用事件来实现．（桌面开发思维） 假设，我们在远程有个接口，可以接受别人的留言： URL: http://siwei.me/interface/blogs/add_comment 参数： content: 留言的内容． 请求方式： POST 返回
-
用户单击提交按钮或图像按钮时，就会提交表单。使用<input>或<button>都可以定义提交按钮，只要将其type 特性的值设置为"submit"即可，而图像按钮则是通过将<input>的type 特性值设置为"image"来定义的。因此，只要我们单击以下代码生成的按钮，就可以提交表单。 <!-- 通用提交按钮 --> <input type="submit" value="Submit For
-
问题内容： 我是stackoverflow和CodeIgniter的新手，目前正在尝试在Internet上找到的一些简单代码示例，以开始使用。我现在正在处理的是一种使用CI和Ajax（jQuery）的表单，并将表单的输入保存在数据库中，然后在表单的同一页上显示最新的表单。如果我感到困惑，那是这里的4.7应用示例。最初的源代码位于此处，但为了与最新版本的CI配合使用，我对其进行了修改，并在下面引用了