使用javascript将html元素完全更改为另一个<；按钮>；下一步</按钮>；至<；输入类型="；提交&燃气轮机；

我有一个由多个部分组成的表单：当用户填写每个页面并单击下面给出的下一个按钮时。在最后一页上，next按钮更改为submit元素，但我无法将数据提交到数据库（MySQL XAMPP），我需要输入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>

---

首先将

按钮

元素更改为

输入

类型按钮元素：

<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>

---

请注意，您还必须删除或更改submit按钮的

onclick属性。
我创建了一个我认为可以使用的代码片段…

我认为最好的方法是使用另一个元素进行提交。

因此，我添加了一个隐藏的提交按钮，在必要时显示

这就是你想要实现的吗

请参见代码中的我的注释：


//在此处添加了此变量
var tabs=document.getElementsByClassName（“tab”）；
var prev=document.getElementById（“prevBtn”）；
var next=document.getElementById（“nextBtn”）；
var subm=document.getElementById（“submBtn”）；//新按钮
var n=0；
函数nextPrev（i）{//重命名了您的函数
//添加：隐藏所有选项卡
对于（var j=0；j

.tab{
显示：无；
}
#子MBTN{
显示：无；
}

以前的
下一个
提交表格
表0
表1
表2
表3
在最后一个表单中，您向按钮元素添加了一个类型属性。像这样

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").setAttribute("type", "submit");
        document.getElementById("nextBtn").innerHTML = "Submit Form";
    } else {
        document.getElementById("nextBtn").innerHTML = "Next";
    }
}

在按钮style=“display:none；”下添加一个输入元素，并给它一个id=“js submit form”

}

然后根据需要设置输入的样式。希望有帮助；-）

仅供参考，此多部分表单是由
创建的，请提供要调用的submit（）-函数和nextPrev（）-函数。@batman Hello。欢迎来到StackOverflow。使用更新此问题将帮助尝试回答此问题的人更好地理解问题。干杯：）
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');
    }
}

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").setAttribute("type", "submit");
        document.getElementById("nextBtn").innerHTML = "Submit Form";
    } else {
        document.getElementById("nextBtn").innerHTML = "Next";
    }
}

    <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>

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)