我有一个多部分的形式:当用户填满每个页面,并点击下面给出的下一步按钮。当在最后一页,下一步按钮更改为提交元素,但我不能提交数据到数据库(MySQL)我需要输入type=“提交”而不是一个按钮。我想要将所有按钮更改为输入类型submit。我的脚本如下:
按钮的HTML
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" name="submit1" id="nextBtn" onclick="nextPrev(1)">Next</button>
</div>
脚本
function showTab1(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 Form";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
}
发布于 2018-08-26 08:49:40
在“style=:none;”按钮下添加一个input元素,并给它一个id="js-submit-form“
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" name="submit1" id="nextBtn" onclick="nextPrev(1)">Next</button>
<input type="submit" id="js-submit-form" name="submit" value="Submit Form" style="display: none;">
</div>
然后,我为#nextBtn设置了display:none,为#js-submit-form设置了display:block
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").style.display = "none";
document.getElementById("js-submit-form").style.display = "inline";
} else {
document.getElementById("nextBtn").style.display = "inline";
document.getElementById("js-submit-form").style.display = "none";
document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
}
然后根据您的需要设置输入的样式。希望这能有所帮助;-)
仅供参考此多部分表单是由w3schools创建的
发布于 2018-04-30 15:14:15
首先,将button
元素更改为input
类型的按钮元素:
<div style="float:right;">
<input type="button" id="prevBtn" onclick="nextPrev(-1)" value="Previous" />
<input type="button" name="submit1" id="nextBtn" onclick="nextPrev(1)" value="Next" />
</div>
然后在Javascript中,您可以将submit按钮的type
更改为submit
function showTab1(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";
}
var nextBtn = document.getElementById("nextBtn");
if (n == (x.length - 1)) {
nextBtn.setAttribute('value', 'Submit Form');
nextBtn.setAttribute('type', 'submit');
nextBtn.removeAttribute('onclick');
} else {
nextBtn.setAttribute('value', 'Next');
nextBtn.setAttribute('type', 'button');
}
}
请注意,您还必须删除或更改submit按钮的onclick
属性。
发布于 2018-04-30 15:20:58
我创建了我认为是您的…代码的工作片段
我认为最好的方法是使用提交的另一个元素。
因此,我添加了一个隐藏的提交按钮,它在必要时显示。
这就是你想要实现的吗?
请参阅我在代码中的注释:
// Added this vars here
var tabs = document.getElementsByClassName("tab");
var prev = document.getElementById("prevBtn");
var next = document.getElementById("nextBtn");
var subm = document.getElementById("submBtn"); // New button
var n = 0;
function nextPrev(i) { // Renamed your function
// Added: Hide all tabs
for (var j = 0; j < tabs.length; j++) {
tabs[n].style.display = "none";
}
// This function will display the specified tab of the form...
n = n + i;
tabs[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
prev.style.display = "none";
} else {
prev.style.display = "inline";
}
if (n == (tabs.length - 1)) {
next.style.display = "none";
subm.style.display = "inline";
} else {
next.style.display = "inline";
subm.style.display = "none";
}
}
nextPrev(0); // Launch the function on load
.tab {
display: none;
}
#submBtn {
display: none;
}
<form><!-- Added form -->
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
<!-- Added this button -->
<button type="submit" name="submit1" id="submBtn">Submit Form</button>
</div>
<!-- Added tabs -->
<div class="tab">tab 0</div>
<div class="tab">tab 1</div>
<div class="tab">tab 2</div>
<div class="tab">tab 3</div>
</form>
⋅⋅⋅
disabled
disabled
属性
您可以使用disabled
属性来代替显示/隐藏元素。
下面是使用它的相同代码:
// Added this vars here
var tabs = document.getElementsByClassName("tab");
var prev = document.getElementById("prevBtn");
var next = document.getElementById("nextBtn");
var subm = document.getElementById("submBtn"); // New button
var n = 0;
function nextPrev(i) { // Renamed your function
// Added: Hide all tabs
for (var j = 0; j < tabs.length; j++) {
tabs[n].style.display = "none";
}
// This function will display the specified tab of the form...
n = n + i;
tabs[n].style.display = "block";
//... and fix the Previous/Next buttons:
if (n == 0) {
prev.disabled = true;
} else {
prev.disabled = false;
}
if (n == (tabs.length - 1)) {
next.disabled = true;
subm.disabled = false;
} else {
next.disabled = false;
subm.disabled = true;
}
}
nextPrev(0); // Launch the function on load
.tab {
display: none;
}
<form><!-- Added form -->
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)">Next</button>
<!-- Added this button -->
<button type="submit" name="submit1" id="submBtn">Submit Form</button>
</div>
<!-- Added tabs -->
<div class="tab">tab 0</div>
<div class="tab">tab 1</div>
<div class="tab">tab 2</div>
<div class="tab">tab 3</div>
</form>
我希望它能帮上忙。
https://stackoverflow.com/questions/50095181
复制相似问题